完成商城功能

完成商城功能

assets/css/class.less

@@ -949,10 +949,8 @@
                             box-sizing: border-box;
 
                             .content_right_list {
-                                width: 350px;
-                                height: 58px;
-                                line-height: 58px;
-                                margin-bottom: 48px;
+                                height:54px;
+                                line-height: 54px;
 
                                 .part3_time {
                                     float: left;
@@ -985,13 +983,10 @@
                                 .time_left_content {
                                     float: left;
                                     width: 231px;
-                                    height: 58px;
-                                    display: -webkit-box;
-                                    -webkit-box-orient: vertical;
-                                    -webkit-line-clamp: 2;
+                                    height: 32px;
+                                    white-space: nowrap;
                                     overflow: hidden;
                                     text-overflow: ellipsis;
-                                    word-break: break-all;
                                     line-height: 22px;
                                     padding-top: 12px;
                                     box-sizing: border-box;
@@ -1017,6 +1012,13 @@
                                     color: #a01c0e;
                                 }
                             }
+
+                            &:nth-child(1),&:nth-child(5) {
+                                a {
+                                    color:#333;
+                                    font-weight: bold;
+                                }
+                            }
                         }
                     }
                 }

assets/css/index.less

@@ -1740,10 +1740,8 @@
                             box-sizing: border-box;
 
                             .content_right_list {
-                                width: 350px;
-                                height: 58px;
-                                line-height: 58px;
-                                margin-bottom: 35px;
+                                height:54px;
+                                line-height: 54px;
 
                                 .part5_time {
                                     float: left;
@@ -1775,14 +1773,11 @@
 
                                 .time_left_content {
                                     float: left;
-                                    width: 231px;
-                                    height: 58px;
-                                    display: -webkit-box;
-                                    -webkit-box-orient: vertical;
-                                    -webkit-line-clamp: 2;
+                                    width: 300px;
+                                    height: 32px;
+                                    white-space: nowrap;
                                     overflow: hidden;
                                     text-overflow: ellipsis;
-                                    word-break: break-all;
                                     line-height: 22px;
                                     padding-top: 12px;
                                     box-sizing: border-box;
@@ -1790,8 +1785,8 @@
                                     font-weight: 400;
                                     font-size: 18px;
                                     color: #333333;
-                                    border-left: 1px solid #D9D9D9;
-                                    padding-left: 22px;
+                                    //border-left: 1px solid #D9D9D9;
+                                    padding-left: 10px;
 
                                     a {
                                         color: #333333;
@@ -1801,6 +1796,13 @@
                                 .time_left_content:hover {
                                     color: #a01c0e;
                                 }
+
+                                &:nth-child(1),&:nth-child(5) {
+                                    a {
+                                        color:#333;
+                                        font-weight: bold;
+                                    }
+                                }
                             }
                         }
                     }

assets/css/shop/class.less

@@ -812,6 +812,7 @@ section {
         color: #999;
         font-size: 14px;
         margin-top: 0px;
+        cursor: pointer;
     }
 }
 

assets/css/shop/detail.less

@@ -0,0 +1,1155 @@
+@charset "utf-8";
+
+* {
+    margin: 0;
+    padding: 0;
+
+    font-family: "微软雅黑", "microsoft yahei";
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+a:active {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:focus {
+    text-decoration: none;
+}
+
+body {
+    position: relative;
+}
+
+.clearfix {
+    overflow: hidden;
+}
+
+.clearfix_2::after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.hiddenColor {
+    visibility: hidden;
+}
+
+.hand {
+    cursor: pointer;
+}
+
+.aTag_parent {
+    position: relative;
+}
+
+.aTag_parent>a,
+.aTag {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 99;
+    border: 0px;
+    top: 0px;
+    left: 0px;
+    background: rgba(0, 0, 0, 0);
+}
+
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dot2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.dot3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+input,
+img {
+    border: none;
+}
+
+.cover100 img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.back100 {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+article,
+aside,
+footer,
+header,
+time,
+video,
+main,
+nav,
+h4,
+h3,
+section {
+    display: block;
+}
+
+.index_main {
+    margin: 0 auto 30px;
+}
+
+.slow_6 {
+    -webkit-transition: all .6s;
+    -moz-transition: all .6s;
+    -ms-transition: all .6s;
+    -o-transition: all .6s;
+    transition: all .6s;
+}
+
+.index_main {
+    width: 1200px;
+}
+
+.shop_head {
+    margin: 30px auto 0px;
+}
+
+.shop_head_left {
+    float: left;
+    width: 322px;
+    margin-right: 33px;
+
+    .shop_head_left_a {
+        width: 322px;
+        display: block;
+    }
+}
+
+.shop_head_img {
+    width: 322px;
+    display: block;
+}
+
+.shop_head_form_out {
+    width: 550px;
+    float: left;
+
+    .shop_head_form {
+        margin-top: 37px;
+        display: block;
+        width: 547px;
+        border: solid 1px #A01C0E;
+        height: 40px;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .shop_head_btn {
+        float: right;
+        width: 52px;
+        height: 100%;
+        border: solid 1px #fff;
+        box-sizing: border-box;
+        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
+        background-size: 22px 22px;
+    }
+
+    .shop_head_inp {
+        display: block;
+        text-indent: 11px;
+        height: 40px;
+        line-height: 40px;
+        width: 490px;
+    }
+
+    .shop_head_form_foot {
+        width: 550px;
+        margin-top: 10px;
+    }
+
+    .shop_head_form_foot_a {
+        float: left;
+        height: 18px;
+        line-height: 18px;
+        color: #999;
+        font-size: 14px;
+        margin-right: 10px;
+    }
+
+    .shop_head_form_foot_a:nth-of-type(1) {
+        color: #A01C0E;
+    }
+
+    .shop_head_form_foot_a:hover {
+        color: #A01C0E;
+    }
+}
+
+.shop_head_right {
+    float: right;
+    margin-top: 37px;
+    position: relative;
+
+    .shop_head_right_btn {
+        float: right;
+        width: 120px;
+        height: 40px;
+        line-height: 40px;
+        color: #666;
+        font-size: 14px;
+        margin-left: 10px;
+        text-indent: 52px;
+        border: 1px solid #E9E9E9;
+        background: no-repeat 20px center #F4F4F4;
+        background-size: 24px 24px;
+    }
+
+    .shop_head_right_btn:nth-of-type(1) {
+        background-image: url(@/public/img/4.png);
+    }
+
+    .shop_head_right_btn:nth-of-type(2) {
+        background-image: url(@/public/img/5.png);
+    }
+
+    .shop_head_right_btn:hover {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+    }
+
+    .shop_head_right_btn:nth-of-type(1):hover {
+        background-image: url(@/public/img/4a.png);
+    }
+
+    .shop_head_right_btn:nth-of-type(2):hover {
+        background-image: url(@/public/img/5a.png);
+    }
+
+    .shop_head_right_btn_1_only {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+        background-image: url(@/public/img/4a.png) !important;
+    }
+
+    .shop_head_right_btn_2_only {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+        background-image: url(@/public/img/5a.png) !important;
+    }
+
+    .shop_head_right_btn:hover .shop_head_right_out {
+        display: block;
+    }
+}
+
+.shop_head_right_box {
+    background: #fff;
+    height: 1111px;
+    margin-top: 20px;
+}
+
+.shop_alert_out {
+    position: absolute;
+    width: 1036px;
+    right: 0px;
+    top: 99%;
+    z-index: 111;
+}
+
+.shop_alert_box {
+    background: #fff;
+    box-sizing: border-box;
+    padding: 0px 20px;
+    border: solid 1px #A01C0E;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.shop_alert_head_box {}
+
+.shop_alert_head_name_1 {
+    float: left;
+    font-weight: bold;
+    color: #A01C0E;
+    font-size: 20px;
+    margin-top: 30px;
+    letter-spacing: 1px;
+}
+
+.shop_alert_head_name_2 {
+    float: left;
+    color: #333;
+    font-size: 16px;
+    margin: 35px 0px 0px 10px;
+    position: relative;
+    padding-left: 22px;
+    font-weight: bold;
+}
+
+.shop_alert_head_name_2::after {
+    content: '';
+    display: block;
+    width: 14px;
+    height: 10px;
+    position: absolute;
+    left: 0px;
+    bottom: 3px;
+    background: url(@/public/img/16.png) no-repeat left 0px;
+    background-size: 100% 100%;
+}
+
+.shop_alert_head_btn_a {
+    float: right;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    font-size: 14px;
+    padding: 0px 20px 0px 36px;
+    margin-top: 23px;
+    background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
+    background-size: 14px auto;
+}
+
+.shop_alert_ul {
+    margin: 28px auto 0px;
+    width: 980px;
+}
+
+.shop_alert_li {
+    margin-bottom: 11px;
+    display: flex;
+
+    .shop_alert_li_label {
+        width: 150px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        padding-right: 24px;
+        font-weight: bold;
+        position: relative;
+        box-sizing: border-box;
+        margin-right: 20px;
+    }
+
+    .shop_alert_li_label::after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 22px;
+        height: 22px;
+        background: url(@/public/img/15.png) no-repeat right 0px;
+        background-size: 100% 100%;
+    }
+
+    .shop_alert_li_panel {}
+
+    .shop_alert_li_panel_a {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #666;
+        font-size: 16px;
+        margin: 0px 25px 10px 0px;
+    }
+}
+
+.shop_alert_li_panel_a:hover {
+    color: #A01C0E;
+}
+
+.shop_alert_1_index {
+    margin-top: 20px;
+}
+
+.shop_alert_img_ul {
+    margin-top: 30px;
+}
+
+.shop_alert_img_li {
+    float: left;
+    width: 314px;
+    margin: 0px 26px 30px 0px;
+    box-sizing: border-box;
+
+    .shop_alert_img_li_a {
+        display: block;
+        width: 100%;
+    }
+
+    .shop_alert_img_li_img {
+        width: 130px;
+        height: 130px;
+        margin-right: 10px;
+        float: left;
+    }
+
+    .shop_alert_img_li_right {
+        width: 173px;
+        float: right;
+    }
+
+    .shop_alert_img_li_h4 {
+        height: 18px;
+        line-height: 18px;
+        color: #333;
+        font-size: 14px;
+        font-weight: bold;
+        margin-top: 7px;
+    }
+
+    .shop_alert_img_li_dot3 {
+        height: 48px;
+        line-height: 16px;
+        color: #666;
+        font-size: 12px;
+        margin-top: 13px;
+    }
+
+    .shop_alert_img_li_time {
+        float: left;
+        height: 26px;
+        line-height: 26px;
+        color: rgba(51, 51, 51, 0.4);
+        font-size: 12px;
+        margin-top: 18px;
+        background: #f7f7f7;
+        padding: 0px 4px;
+    }
+}
+
+.shop_alert_img_li:nth-of-type(3n) {
+    margin-right: 0;
+}
+
+.shop_alert_img_li_a:hover * {
+    color: #A01C0E;
+}
+
+.shop_banner {
+    width: 1200px;
+    margin: 20px auto 0px;
+}
+
+.shop_banner_a {
+    display: block;
+    width: 1200px;
+    height: 90px;
+    overflow: hidden;
+}
+
+.shop_banner_img {
+    display: block;
+    width: 1200px;
+}
+
+.shop_nav {
+    border: solid 1px #E9E9E9;
+    background: #fafafa;
+    margin-top: 20px;
+}
+
+.shop_nav_head {
+    float: left;
+    height: 28px;
+    width: 138px;
+    margin: 30px 52px 0px 25px;
+}
+
+.shop_nav_head_a {
+    display: block;
+    height: 28px;
+    width: 138px;
+    background: url(@/public/img/7.png) no-repeat left top;
+    background-size: 100% 100%;
+}
+
+.shop_nav_in {
+    float: left;
+}
+
+.shop_nav_in_a {
+    float: left;
+    height: 75px;
+    line-height: 75px;
+    color: #333;
+    font-size: 16px;
+    background: #f8f5f5;
+    width: 118px;
+    border-bottom: solid 5px #A01C0E;
+    font-weight: bold;
+    margin: 5px 0;
+    text-align: center;
+}
+
+.shop_nav_in_a:nth-of-type(4) {
+    margin-right: 8px;
+}
+
+.shop_nav_in_a:hover {
+    color: #A01C0E;
+}
+
+.shop_name_in {
+    float: left;
+    height: 40px;
+    width: 1046px;
+    float: left;
+    box-sizing: border-box;
+}
+
+.shop_name_a {
+    float: left;
+    height: 27px;
+    line-height: 27px;
+    color: #222;
+    font-size: 20px;
+    position: relative;
+    margin: 7px 14.5px 0;
+    padding: 0px 10px;
+}
+
+.shop_name_a::after {
+    content: '/';
+    display: block;
+    position: absolute;
+    top: 0px;
+    right: -18px;
+    height: 100%;
+    line-height: 27px;
+    color: #E9E9E9;
+    font-size: 20px;
+}
+
+.shop_name_a:nth-last-of-type(1)::after {
+    content: '';
+    display: none;
+}
+
+.shop_name_a_only {
+    background: #A01C0E;
+    color: #fff;
+}
+
+.shop_name_out {
+    margin-top: 20px;
+}
+
+.shop_name_box {
+    border-top: solid 1px #fff;
+
+    .shop_name_box_a {
+        height: 44px;
+        line-height: 44px;
+        color: #fff;
+        font-weight: bold;
+        font-size: 20px;
+    }
+}
+
+.shop_name {
+    float: left;
+    height: 44px;
+    line-height: 44px;
+    color: #fff;
+    font-weight: bold;
+    position: relative;
+    z-index: 11;
+    text-align: center;
+    font-size: 20px;
+    background: #A01C0E;
+    padding: 0px 14px;
+}
+
+.shop_name_right {
+    height: 40px;
+    border-bottom: 1px solid #E8E9EC;
+    margin-top: 4px;
+    background: #F8F8F8;
+    position: relative;
+    z-index: 2;
+}
+
+.shop_name_right::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 100%;
+    width: 16px;
+    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
+    background-size: 100% auto;
+}
+
+.shop_name_btn {
+    width: 24px;
+    height: 24px;
+    float: right;
+    margin: 10px 22px 0px 0px;
+    background: url(@/public/img/8.png) no-repeat center center;
+    border-radius: 50%;
+    background-size: 100% 100%;
+}
+
+.shop_2_left {
+    float: left;
+    width: 900px;
+}
+
+.shop_3_right {
+    float: right;
+    width: 280px;
+}
+
+.shop_1_box {
+    margin: 30px auto 0px;
+}
+
+.shop_2_box {
+    margin: 30px auto 0px;
+}
+
+.shop_3_box {
+    margin: 0px auto 0px;
+}
+
+.shop_4_box {
+    margin: 4px auto 0px;
+}
+
+.shop_5_box {
+    margin: 4px auto 0px;
+}
+
+.categ_crumb_box {
+    margin-top: 20px;
+    border-bottom: solid 1px #D9D9D9;
+    padding-bottom: 20px;
+    position: relative;
+}
+
+.categ_crumb_box2 {
+    margin-top: 20px;
+    padding-bottom: 20px;
+    position: relative;
+}
+
+.categ_crumb_left {
+    float: left;
+    height: 21px;
+    line-height: 21px;
+    color: #999;
+    font-size: 16px;
+}
+
+.categ_crumb_left_a {
+    display: inline-block;
+    height: 21px;
+    line-height: 21px;
+    color: #999;
+    font-size: 16px;
+}
+
+.categ_crumb_left_text {
+    display: inline-block;
+    height: 21px;
+    line-height: 21px;
+    color: #333;
+    font-size: 16px;
+}
+
+.categ_3_index {
+    margin-top: 28px;
+}
+
+.categ_ul_img_1 {
+    margin-top: 20px;
+    overflow: hidden;
+}
+
+.categ_li_img_1 {
+    float: left;
+    margin: 0px 24px 20px 0px;
+    width: 180px;
+    position: relative;
+
+    .categ_li_img_1_a {}
+
+    .categ_li_img_1_img {
+        display: block;
+        width: 180px;
+        height: 180px;
+    }
+
+    .categ_li_img_1_dot2 {
+        width: 168px;
+        margin: 10px auto 0px;
+        height: 32px;
+        line-height: 16px;
+        color: #333;
+        font-size: 14px;
+    }
+}
+
+.categ_li_img_1:nth-of-type(6n) {
+    margin-right: 0px;
+}
+
+.categ_li_img_1_hover_dot1 {
+    width: 152px;
+    position: absolute;
+    left: 50%;
+    margin-left: -76px;
+    bottom: 13px;
+    font-size: 14px;
+    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.categ_li_img_1:hover .categ_li_img_1_dot2 {
+    color: #A01C0E;
+}
+
+.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/18.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/19.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/20.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_ul_img_2 {
+    margin-top: 20px;
+    overflow: hidden;
+}
+
+.categ_li_img_2 {
+    float: left;
+    margin: 0px 24px 20px 0px;
+    width: 180px;
+    position: relative;
+
+    .categ_li_img_2_a {}
+
+    .categ_li_img_2_img {
+        display: block;
+        width: 180px;
+        height: 180px;
+    }
+
+    .categ_li_img_2_dot2 {
+        width: 168px;
+        margin: 10px auto 0px;
+        height: 32px;
+        line-height: 16px;
+        color: #333;
+        font-size: 14px;
+    }
+
+    .categ_li_img_2:nth-of-type(6n) {
+        margin-right: 0px;
+    }
+}
+
+.categ_li_img_2_hover_dot1 {
+    width: 152px;
+    position: absolute;
+    left: 50%;
+    margin-left: -76px;
+    bottom: 13px;
+    font-size: 14px;
+    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.categ_li_img_2:hover .categ_li_img_2_dot2 {
+    color: #A01C0E;
+}
+
+/* 供应商品 */
+.supply_1_index {
+    margin-top: 30px;
+}
+
+.supply_1_index_qiugou {
+    display: flex;
+    justify-content: space-between;
+}
+
+.supply_1_index_qiugou_left {
+    width: 900px;
+    padding-top: 30px;
+    border-top: solid 1px #E9E9E9;
+}
+
+.supply_1_img {
+    float: left;
+    width: 330px;
+    height: 330px;
+}
+
+.supply_1_right {
+    float: right;
+    width: 845px;
+}
+
+.supply_1_right_qiugou {
+    float: right;
+    width: 545px;
+}
+
+.supply_1_h4 {
+    line-height: 29px;
+    color: #333;
+    font-size: 22px;
+}
+
+.supply_1_title_box {}
+
+.supply_1_title {
+    float: left;
+    height: 31px;
+    line-height: 31px;
+    color: #999;
+    font-size: 16px;
+    padding: 0px 10px;
+    margin: 14px 20px 0px 0px;
+    background: #F8F8F8;
+}
+
+.supply_1_ul {
+    margin-top: 10px;
+}
+
+.supply_1_ul_qiugou {
+    margin-top: 7px;
+}
+
+.supply_1_li {
+    display: flex;
+    margin-bottom: 16px;
+
+    .supply_1_li_label {
+        line-height: 21px;
+        color: #999;
+        font-size: 16px;
+        min-width: 64px;
+        margin-right: 15px;
+    }
+
+    .supply_1_li_text {
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+    }
+}
+
+.supply_1_li_qiugou {
+    display: flex;
+    margin-top: 21px;
+
+    .supply_1_li_label {
+        line-height: 21px;
+        color: #999;
+        font-size: 16px;
+        min-width: 64px;
+        margin-right: 15px;
+    }
+
+    .supply_1_li_text {
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+    }
+}
+
+
+
+
+.supply_head_box {
+    border-bottom: solid 1px #E9E9E9;
+    padding-bottom: 22px;
+    margin-top: 20px;
+    border-top: solid 1px rgba(0, 0, 0, 0);
+
+    .supply_head_a {
+        float: left;
+        font-size: 20px;
+        color: #999;
+        height: 18px;
+        line-height: 18px;
+        margin-right: 40px;
+        cursor: pointer;
+    }
+
+    .supply_head_a:nth-of-type(1) {
+        border-left: solid 3px #A01C0E;
+        text-indent: 15px;
+    }
+}
+
+.supply_head_a_only {
+    color: #333 !important;
+}
+
+.supply_art_box_p {
+    line-height: 35px;
+    font-size: 20px;
+}
+
+.supply_art_box_img {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    img {
+        width: 210px;
+        height: 210px;
+        margin-right:37px;
+    }
+}
+
+.supply_art_out {
+    margin-top: 20px;
+}
+
+.supply_art_out>* {
+    color: #333;
+    line-height: 25px;
+    font-size: 20px;
+}
+
+.supply_art_box {}
+
+@media screen and (min-width:1200px) {
+    /*pc_1440*/
+    @media screen and (max-width:1440px) {
+        /*1200*/
+    }
+
+    .pc_none {
+        display: none;
+    }
+}
+
+@media screen and (max-width:599px) {}
+
+@media screen and (max-width:320px) {}
+
+//供应求购板块
+.shop_3_right {
+    float: right;
+    width: 280px;
+}
+.choice_1_box {
+    border: solid 1px #E9E9E9;
+    box-sizing: border-box;
+
+    .choice_1_btn_box {
+        height: 64px;
+    }
+
+    .choice_1_btn {
+        height: 64px;
+        width: 50%;
+        float: left;
+    }
+
+    .choice_1_btn_a {
+        display: block;
+        width: 100%;
+        line-height: 64px;
+        color: #333;
+        font-style: italic;
+        height: 64px;
+        background: #F8F8F8;
+        text-align: center;
+        font-size: 16px;
+        box-sizing: border-box;
+        font-family: DingTalk JinBuTi, DingTalk JinBuTi;
+        letter-spacing: 1px;
+        cursor: pointer;
+    }
+
+    .choice_1_btn_only {}
+
+    .choice_1_btn_only .choice_1_btn_a {
+        background: #fff;
+        border-bottom: solid 1px #fff;
+    }
+}
+
+.shop_ul_img_2 {
+    width: 252px;
+    margin: 20px auto 0px;
+}
+
+.shop_li_img_2 {
+    height: 22px;
+    margin-bottom: 22px;
+
+    .shop_li_img_2_a {
+        display: block;
+        height: 22px;
+        display: flex;
+    }
+
+    .shop_li_img_2_num {
+        width: 22px;
+        max-width: 22px;
+        min-width: 22px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        background: #ccc;
+        color: #F6F6F6;
+        font-size: 16px;
+        border-radius: 4px;
+        margin-right: 10px;
+    }
+
+    .shop_li_img_2_right {
+        height: 22px;
+    }
+
+    .shop_li_img_2_img {
+        display: none;
+    }
+
+    .shop_li_img_2_text {
+        height: 22px;
+        line-height: 22px;
+        color: #333;
+        font-size: 16px;
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.shop_li_img_2:nth-of-type(1) {
+    height: auto;
+    margin-bottom: 15px;
+}
+
+.shop_li_img_2:nth-of-type(1) .shop_li_img_2_a {
+    height: auto;
+}
+
+.shop_li_img_2:nth-of-type(1) .shop_li_img_2_right {
+    height: auto;
+    display: flex;
+    border-bottom: solid 1px #E9E9E9;
+    padding-bottom: 10px;
+}
+
+.shop_li_img_2:nth-of-type(1) .shop_li_img_2_img {
+    display: block;
+    width: 45px;
+    height: 45px;
+    margin-right: 10px;
+}
+
+.shop_li_img_2:nth-of-type(1) .shop_li_img_2_text {
+    height: 44px;
+    line-height: 22px;
+    color: #333;
+    font-size: 16px;
+    font-weight: bold;
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    word-break: break-all;
+    white-space: wrap;
+}
+
+.shop_li_img_2:nth-of-type(1) .shop_li_img_2_num {
+    background: #A01C0E;
+    color: #fff;
+}
+
+.shop_li_img_2:nth-of-type(2) .shop_li_img_2_num {
+    background: #FFC62E;
+    color: #fff;
+}
+
+.shop_li_img_2:nth-of-type(3) .shop_li_img_2_num {
+    background: #E98008;
+    color: #fff;
+}
+
+.shop_li_img_2:hover .shop_li_img_2_text {
+    color: #A01C0E;
+}

assets/css/shop/list.less

@@ -0,0 +1,1157 @@
+@charset "utf-8";
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "微软雅黑", "microsoft yahei";
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+a:active {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:focus {
+    text-decoration: none;
+}
+
+body {
+    position: relative;
+}
+
+.clearfix {
+    overflow: hidden;
+}
+
+.clearfix_2::after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.hiddenColor {
+    visibility: hidden;
+}
+
+.hand {
+    cursor: pointer;
+}
+
+.aTag_parent {
+    position: relative;
+}
+
+.aTag_parent>a,
+.aTag {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 99;
+    border: 0px;
+    top: 0px;
+    left: 0px;
+    background: rgba(0, 0, 0, 0);
+}
+
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dot2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.dot3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+input,
+img {
+    border: none;
+}
+
+.cover100 img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.back100 {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+article,
+aside,
+footer,
+header,
+time,
+video,
+main,
+nav,
+h4,
+h3,
+section {
+    display: block;
+}
+
+.index_main {
+    margin: 0 auto 30px;
+}
+
+.slow_6 {
+    -webkit-transition: all .6s;
+    -moz-transition: all .6s;
+    -ms-transition: all .6s;
+    -o-transition: all .6s;
+    transition: all .6s;
+}
+
+.index_main {
+    width: 1200px;
+}
+
+.shop_head {
+    margin: 30px auto 0px;
+
+    .shop_head_left {
+        float: left;
+        width: 322px;
+        margin-right: 33px;
+    }
+
+    .shop_head_left_a {
+        width: 322px;
+        display: block;
+    }
+
+    .shop_head_img {
+        width: 322px;
+        display: block;
+    }
+
+    .shop_head_form_out {
+        width: 550px;
+        float: left;
+    }
+
+    .shop_head_form {
+        margin-top: 37px;
+        display: block;
+        width: 547px;
+        border: solid 1px #A01C0E;
+        height: 40px;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .shop_head_btn {
+        float: right;
+        width: 52px;
+        height: 100%;
+        border: solid 1px #fff;
+        box-sizing: border-box;
+        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
+        background-size: 22px 22px;
+    }
+
+    .shop_head_inp {
+        display: block;
+        text-indent: 11px;
+        height: 40px;
+        line-height: 40px;
+        width: 490px;
+    }
+
+    .shop_head_form_foot {
+        width: 550px;
+        margin-top: 10px;
+    }
+
+    .shop_head_form_foot_a {
+        float: left;
+        height: 18px;
+        line-height: 18px;
+        color: #999;
+        font-size: 14px;
+        margin-right: 10px;
+    }
+
+    .shop_head_form_foot_a:nth-of-type(1) {
+        color: #A01C0E;
+    }
+
+    .shop_head_form_foot_a:hover {
+        color: #A01C0E;
+    }
+
+    .shop_head_right {
+        float: right;
+        margin-top: 37px;
+        position: relative;
+    }
+
+    .shop_head_right_btn {
+        float: right;
+        width: 120px;
+        height: 40px;
+        line-height: 40px;
+        color: #666;
+        font-size: 14px;
+        margin-left: 10px;
+        text-indent: 52px;
+        border: 1px solid #E9E9E9;
+        background: no-repeat 20px center #F4F4F4;
+        background-size: 24px 24px;
+    }
+
+    .shop_head_right_btn:nth-of-type(1) {
+        background-image: url(@/public/img/4.png);
+    }
+
+    .shop_head_right_btn:nth-of-type(2) {
+        background-image: url(@/public/img/5.png);
+    }
+
+    .shop_head_right_btn:hover {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+    }
+
+    .shop_head_right_btn:nth-of-type(1):hover {
+        background-image: url(@/public/img/4a.png);
+    }
+
+    .shop_head_right_btn:nth-of-type(2):hover {
+        background-image: url(@/public/img/5a.png);
+    }
+
+    .shop_head_right_btn_1_only {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+        background-image: url(@/public/img/4a.png) !important;
+    }
+
+    .shop_head_right_btn_2_only {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+        background-image: url(@/public/img/5a.png) !important;
+    }
+
+    .shop_head_right_btn:hover .shop_head_right_out {
+        display: block;
+    }
+
+    .shop_head_right_box {
+        background: #fff;
+        height: 1111px;
+        margin-top: 20px;
+    }
+
+    .shop_alert_out {
+        position: absolute;
+        width: 1036px;
+        right: 0px;
+        top: 99%;
+        z-index: 111;
+    }
+
+    .shop_alert_box {
+        background: #fff;
+        box-sizing: border-box;
+        padding: 0px 20px;
+        border: solid 1px #A01C0E;
+        width: 100%;
+        margin-top: 20px;
+    }
+
+    .shop_alert_head_box {}
+
+    .shop_alert_head_name_1 {
+        float: left;
+        font-weight: bold;
+        color: #A01C0E;
+        font-size: 20px;
+        margin-top: 30px;
+        letter-spacing: 1px;
+    }
+
+    .shop_alert_head_name_2 {
+        float: left;
+        color: #333;
+        font-size: 16px;
+        margin: 35px 0px 0px 10px;
+        position: relative;
+        padding-left: 22px;
+        font-weight: bold;
+    }
+
+    .shop_alert_head_name_2::after {
+        content: '';
+        display: block;
+        width: 14px;
+        height: 10px;
+        position: absolute;
+        left: 0px;
+        bottom: 3px;
+        background: url(@/public/img/16.png) no-repeat left 0px;
+        background-size: 100% 100%;
+    }
+
+    .shop_alert_head_btn_a {
+        float: right;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 14px;
+        padding: 0px 20px 0px 36px;
+        margin-top: 23px;
+        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
+        background-size: 14px auto;
+    }
+
+    .shop_alert_ul {
+        margin: 28px auto 0px;
+        width: 980px;
+    }
+
+    .shop_alert_li {
+        margin-bottom: 11px;
+        display: flex;
+    }
+
+    .shop_alert_li_label {
+        width: 150px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        padding-right: 24px;
+        font-weight: bold;
+        position: relative;
+        box-sizing: border-box;
+        margin-right: 20px;
+    }
+
+    .shop_alert_li_label::after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 22px;
+        height: 22px;
+        background: url(@/public/img/15.png) no-repeat right 0px;
+        background-size: 100% 100%;
+    }
+
+    .shop_alert_li_panel {}
+
+    .shop_alert_li_panel_a {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #666;
+        font-size: 16px;
+        margin: 0px 25px 10px 0px;
+    }
+
+    .shop_alert_li_panel_a:hover {
+        color: #A01C0E;
+    }
+
+    .shop_alert_1_index {
+        margin-top: 20px;
+    }
+
+    .shop_alert_img_ul {
+        margin-top: 30px;
+    }
+
+    .shop_alert_img_li {
+        float: left;
+        width: 314px;
+        margin: 0px 26px 30px 0px;
+        box-sizing: border-box;
+    }
+
+    .shop_alert_img_li_a {
+        display: block;
+        width: 100%;
+    }
+
+    .shop_alert_img_li_img {
+        width: 130px;
+        height: 130px;
+        margin-right: 10px;
+        float: left;
+    }
+
+    .shop_alert_img_li_right {
+        width: 173px;
+        float: right;
+    }
+
+    .shop_alert_img_li_h4 {
+        height: 18px;
+        line-height: 18px;
+        color: #333;
+        font-size: 14px;
+        font-weight: bold;
+        margin-top: 7px;
+    }
+
+    .shop_alert_img_li_dot3 {
+        height: 48px;
+        line-height: 16px;
+        color: #666;
+        font-size: 12px;
+        margin-top: 13px;
+    }
+
+    .shop_alert_img_li_time {
+        float: left;
+        height: 26px;
+        line-height: 26px;
+        color: rgba(51, 51, 51, 0.4);
+        font-size: 12px;
+        margin-top: 18px;
+        background: #f7f7f7;
+        padding: 0px 4px;
+    }
+
+    .shop_alert_img_li:nth-of-type(3n) {
+        margin-right: 0;
+    }
+
+    .shop_alert_img_li_a:hover * {
+        color: #A01C0E;
+    }
+}
+
+.shop_banner {
+    width: 1200px;
+    overflow: hidden;
+    margin: 20px auto 0px;
+
+    .shop_banner_a {
+        display: block;
+        width: 1200px;
+        height: 90px;
+    }
+
+    .shop_banner_img {
+        display: block;
+        width: 1200px;
+    }
+}
+
+.shop_nav {
+    border: solid 1px #E9E9E9;
+    background: #fafafa;
+    margin-top: 20px;
+}
+
+.shop_nav_head {
+    float: left;
+    height: 28px;
+    width: 138px;
+    margin: 30px 52px 0px 25px;
+
+    .shop_nav_head_a {
+        display: block;
+        height: 28px;
+        width: 138px;
+        background: url(@/public/img/7.png) no-repeat left top;
+        background-size: 100% 100%;
+    }
+}
+
+.shop_nav_in {
+    float: left;
+
+    .shop_nav_in_a {
+        float: left;
+        height: 75px;
+        line-height: 75px;
+        color: #333;
+        font-size: 16px;
+        background: #f8f5f5;
+        width: 118px;
+        border-bottom: solid 5px #A01C0E;
+        font-weight: bold;
+        margin: 5px 0;
+        text-align: center;
+    }
+
+    .shop_nav_in_a:nth-of-type(4) {
+        margin-right: 8px;
+    }
+
+    .shop_nav_in_a:hover {
+        color: #A01C0E;
+    }
+}
+
+.shop_name_in {
+    float: left;
+    height: 40px;
+    width: 1046px;
+    float: left;
+    box-sizing: border-box;
+
+    .shop_name_a {
+        float: left;
+        height: 27px;
+        line-height: 27px;
+        color: #222;
+        font-size: 20px;
+        position: relative;
+        margin: 7px 14.5px 0;
+        padding: 0px 10px;
+    }
+
+    .shop_name_a::after {
+        content: '/';
+        display: block;
+        position: absolute;
+        top: 0px;
+        right: -18px;
+        height: 100%;
+        line-height: 27px;
+        color: #E9E9E9;
+        font-size: 20px;
+    }
+
+    .shop_name_a:nth-last-of-type(1)::after {
+        content: '';
+        display: none;
+    }
+
+    .shop_name_a_only {
+        background: #A01C0E;
+        color: #fff;
+    }
+}
+
+.shop_name_out {
+    margin-top: 20px;
+}
+
+.shop_name_box {
+    border-top: solid 1px #fff;
+}
+
+.shop_name_box_a {
+    height: 44px;
+    line-height: 44px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.shop_name {
+    float: left;
+    height: 44px;
+    line-height: 44px;
+    color: #fff;
+    font-weight: bold;
+    position: relative;
+    z-index: 11;
+    text-align: center;
+    font-size: 20px;
+    background: #A01C0E;
+    padding: 0px 14px;
+}
+
+.shop_name_right {
+    height: 40px;
+    border-bottom: 1px solid #E8E9EC;
+    margin-top: 4px;
+    background: #F8F8F8;
+    position: relative;
+    z-index: 2;
+}
+
+.shop_name_right::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 100%;
+    width: 16px;
+    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
+    background-size: 100% auto;
+}
+
+.shop_name_btn {
+    width: 24px;
+    height: 24px;
+    float: right;
+    margin: 10px 22px 0px 0px;
+    background: url(@/public/img/8.png) no-repeat center center;
+    border-radius: 50%;
+    background-size: 100% 100%;
+}
+
+.shop_2_left {
+    float: left;
+    width: 900px;
+}
+
+.shop_3_right {
+    float: right;
+    width: 280px;
+}
+
+.shop_1_box {
+    margin: 30px auto 0px;
+}
+
+.shop_2_box {
+    margin: 30px auto 0px;
+}
+
+.shop_3_box {
+    margin: 0px auto 0px;
+}
+
+.shop_4_box {
+    margin: 4px auto 0px;
+}
+
+.shop_5_box {
+    margin: 4px auto 0px;
+}
+
+.categ_crumb_box {
+    margin-top: 20px;
+    border-bottom: solid 1px #D9D9D9;
+    padding-bottom: 20px;
+    position: relative;
+}
+
+.categ_crumb_left {
+    float: left;
+    height: 21px;
+    line-height: 21px;
+    color: #999;
+    font-size: 16px;
+
+    .categ_crumb_left_a {
+        display: inline-block;
+        height: 21px;
+        line-height: 21px;
+        color: #999;
+        font-size: 16px;
+    }
+
+    .categ_crumb_left_text {
+        display: inline-block;
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+    }
+}
+
+.categ_crumb_right {
+    float: right;
+
+    .categ_crumb_right_text {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+    }
+
+    .categ_crumb_right_btn {
+        float: left;
+        width: 14px;
+        height: 14px;
+        background-image: url(@/public/img/17.png);
+        margin: 5px 0px 0px 5px;
+    }
+}
+
+.categ_crumb_panel {
+    position: absolute;
+    border: solid 1px #A01C0E;
+    padding: 0px 30px 10px;
+    background: #fff;
+    right: 0px;
+    top: 0px;
+    box-sizing: border-box;
+    width: 658px;
+    top: 100%;
+
+    .categ_crumb_panel_h4 {
+        display: inline-block;
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        padding-right: 31px;
+        margin-top: 20px;
+        background: url(@/public/img/15.png) no-repeat right center;
+        background-size: 21px 21px;
+    }
+
+    .categ_crumb_panel_btn_box {
+        margin-top: 20px;
+    }
+
+    .categ_crumb_panel_btn {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #666;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 0px 26.5px 11px 0px;
+    }
+
+    .categ_crumb_panel_btn:hover {
+        color: #A01C0E;
+    }
+
+    .categ_crumb_panel_btn_only {
+        color: #A01C0E;
+    }
+}
+
+.categ_grey_box {
+    box-sizing: border-box;
+    border: solid 1px #E9E9E9;
+    background: #F8F8F8;
+    padding: 0px 20px 8px;
+    width: 100%;
+    margin-top: 15px;
+
+    .categ_grey_head {
+        height: 48px;
+        line-height: 50px;
+        color: #000;
+        font-size: 18px;
+        border-bottom: dashed 1px #E9E9E9;
+    }
+
+    .categ_grey_ul {
+        margin: 10px 0px 0px -10px;
+    }
+
+    .categ_grey_btn {
+        float: left;
+        line-height: 29px;
+        height: 29px;
+        color: #333;
+        font-size: 16px;
+        margin: 0px 10px 7px;
+    }
+
+    .categ_grey_btn_only {
+        background: #A01C0E;
+        color: #fff;
+        padding: 0px 5px 0px;
+        margin: 0px 5px 7px;
+    }
+}
+
+.categ_head_box {
+    border-bottom: solid 1px #E9E9E9;
+    padding-bottom: 22px;
+    margin-top: 20px;
+    border-top: solid 1px rgba(0, 0, 0, 0);
+
+    .categ_head_a {
+        float: left;
+        text-indent: 15px;
+        font-size: 20px;
+        color: #333;
+        border-left: solid 3px #A01C0E;
+        height: 18px;
+        line-height: 18px;
+    }
+
+    .categ_head_a_more {
+        float: right;
+        color: #999;
+        font-size: 14px;
+        margin-top: 0px;
+    }
+}
+
+.categ_table {}
+
+.categ_table_head_box {
+    height: 61px;
+    border-bottom: solid 1px #E9E9E9;
+}
+
+.categ_table_head_box>.categ_table_td_1 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_head_box>.categ_table_td_2 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_head_box>.categ_table_td_3 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_head_box>.categ_table_td_4 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_td_1 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 155px;
+    margin-right: 126px;
+}
+
+.categ_table_td_2 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 480px;
+    margin-right: 124px;
+}
+
+.categ_table_td_3 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 120px;
+    margin-right: 62px;
+}
+
+.categ_table_td_4 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 133px;
+}
+
+/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
+.categ_table_li {
+    height: 161px;
+    box-sizing: border-box;
+    padding: 15px 0px;
+    border-bottom: solid 1px #E9E9E9;
+}
+
+.categ_table_td_1_img {
+    display: block;
+    width: 130px;
+    height: 130px;
+    margin: 0px auto;
+}
+
+.categ_table_li .categ_table_td_1 {
+    line-height: 160px;
+    line-height: 160px;
+}
+
+.categ_table_li .categ_table_td_2 {
+    line-height: 160px;
+    line-height: 160px;
+    font-weight: bold;
+    color: #333;
+}
+
+.categ_table_li .categ_table_td_3 {
+    line-height: 160px;
+    line-height: 160px;
+}
+
+.categ_table_li .categ_table_td_4 {
+    line-height: 160px;
+    line-height: 160px;
+}
+
+.categ_3_index {
+    margin-top: 28px;
+}
+
+.categ_ul_img_1 {
+    margin-top: 20px;
+}
+
+.categ_li_img_1 {
+    float: left;
+    margin: 0px 24px 20px 0px;
+    width: 180px;
+    position: relative;
+}
+
+.categ_li_img_1_a {}
+
+.categ_li_img_1_img {
+    display: block;
+    width: 180px;
+    height: 180px;
+}
+
+.categ_li_img_1_dot2 {
+    width: 168px;
+    margin: 10px auto 0px;
+    height: 32px;
+    line-height: 16px;
+    color: #333;
+    font-size: 14px;
+}
+
+.categ_li_img_1:nth-of-type(6n) {
+    margin-right: 0px;
+}
+
+.categ_li_img_1_hover_dot1 {
+    width: 152px;
+    position: absolute;
+    left: 50%;
+    margin-left: -76px;
+    bottom: 13px;
+    font-size: 14px;
+    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.categ_li_img_1:hover .categ_li_img_1_dot2 {
+    color: #A01C0E;
+}
+
+.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/18.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/19.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/20.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_ul_img_2 {
+    margin-top: 20px;
+}
+
+.categ_li_img_2 {
+    float: left;
+    margin: 0px 24px 20px 0px;
+    width: 180px;
+    position: relative;
+}
+
+.categ_li_img_2_a {}
+
+.categ_li_img_2_img {
+    display: block;
+    width: 180px;
+    height: 180px;
+}
+
+.categ_li_img_2_dot2 {
+    width: 168px;
+    margin: 10px auto 0px;
+    height: 32px;
+    line-height: 16px;
+    color: #333;
+    font-size: 14px;
+}
+
+.categ_li_img_2:nth-of-type(6n) {
+    margin-right: 0px;
+}
+
+.categ_li_img_2_hover_dot1 {
+    width: 152px;
+    position: absolute;
+    left: 50%;
+    margin-left: -76px;
+    bottom: 13px;
+    font-size: 14px;
+    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.categ_li_img_2:hover .categ_li_img_2_dot2 {
+    color: #A01C0E;
+}
+
+/*乡村网-商城-搜索-查看更多*/
+.search_head_text_box {
+    height: 18px;
+    line-height: 18px;
+    color: #333;
+    font-size: 16px;
+    float: left;
+    margin-left: 20px;
+}
+
+.search_head_text_red {
+    color: #A01C0E;
+}
+
+.search_table_td_2 {
+    float: left;
+    height: 100%;
+    width: 480px;
+    margin-right: 124px;
+
+    .search_table_td_2_head {
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        font-weight: bold;
+        width: 480px;
+    }
+
+    .search_table_td_2_dot2 {
+        max-height: 36px;
+        line-height: 18px;
+        color: #999;
+        font-size: 14px;
+        margin-top: 5px;
+        width: 480px;
+    }
+
+    .search_table_td_2_in {
+        height: 129px;
+        width: 480px;
+        display: table-cell;
+        vertical-align: middle;
+    }
+}
+
+@media screen and (min-width:1200px) {
+    /*pc_1440*/
+    @media screen and (max-width:1440px) {
+        /*1200*/
+    }
+
+    .pc_none {
+        display: none;
+    }
+}
+
+@media screen and (max-width:599px) {}
+
+@media screen and (max-width:320px) {}
+
+
+
+.pagination {
+    margin: 40px auto 30px auto;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #a01c0e;
+    }
+
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+    }
+
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+    }
+
+    .el-pagination.is-background::v-deep .btn-next.is-active,
+    .el-pagination.is-background::v-deep .btn-prev.is-active,
+    .el-pagination.is-background::v-deep .el-pager li.is-active {
+        background-color: #a01c0e;
+        color: #fff;
+    }
+
+}

assets/css/shop/search.less

@@ -0,0 +1,1120 @@
+@charset "utf-8";
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "微软雅黑", "microsoft yahei";
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+a:active {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:focus {
+    text-decoration: none;
+}
+
+body {
+    position: relative;
+}
+
+.clearfix {
+    overflow: hidden;
+}
+
+.clearfix_2::after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.hiddenColor {
+    visibility: hidden;
+}
+
+.hand {
+    cursor: pointer;
+}
+
+.aTag_parent {
+    position: relative;
+}
+
+.aTag_parent>a,
+.aTag {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 99;
+    border: 0px;
+    top: 0px;
+    left: 0px;
+    background: rgba(0, 0, 0, 0);
+}
+
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dot2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.dot3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+input,
+img {
+    border: none;
+}
+
+.cover100 img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.back100 {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+article,
+aside,
+footer,
+header,
+time,
+video,
+main,
+nav,
+h4,
+h3,
+section {
+    display: block;
+}
+
+.index_main {
+    margin: 0 auto 30px;
+}
+
+.slow_6 {
+    -webkit-transition: all .6s;
+    -moz-transition: all .6s;
+    -ms-transition: all .6s;
+    -o-transition: all .6s;
+    transition: all .6s;
+}
+
+.index_main {
+    width: 1200px;
+}
+
+.shop_head {
+    margin: 30px auto 0px;
+
+    .shop_head_left {
+        float: left;
+        width: 322px;
+        margin-right: 33px;
+    }
+
+    .shop_head_left_a {
+        width: 322px;
+        display: block;
+    }
+
+    .shop_head_img {
+        width: 322px;
+        display: block;
+    }
+
+    .shop_head_form_out {
+        width: 550px;
+        float: left;
+    }
+
+    .shop_head_form {
+        margin-top: 37px;
+        display: block;
+        width: 547px;
+        border: solid 1px #A01C0E;
+        height: 40px;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .shop_head_btn {
+        float: right;
+        width: 52px;
+        height: 100%;
+        border: solid 1px #fff;
+        box-sizing: border-box;
+        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
+        background-size: 22px 22px;
+    }
+
+    .shop_head_inp {
+        display: block;
+        text-indent: 11px;
+        height: 40px;
+        line-height: 40px;
+        width: 490px;
+    }
+
+    .shop_head_form_foot {
+        width: 550px;
+        margin-top: 10px;
+    }
+
+    .shop_head_form_foot_a {
+        float: left;
+        height: 18px;
+        line-height: 18px;
+        color: #999;
+        font-size: 14px;
+        margin-right: 10px;
+    }
+
+    .shop_head_form_foot_a:nth-of-type(1) {
+        color: #A01C0E;
+    }
+
+    .shop_head_form_foot_a:hover {
+        color: #A01C0E;
+    }
+
+    .shop_head_right {
+        float: right;
+        margin-top: 37px;
+        position: relative;
+    }
+
+    .shop_head_right_btn {
+        float: right;
+        width: 120px;
+        height: 40px;
+        line-height: 40px;
+        color: #666;
+        font-size: 14px;
+        margin-left: 10px;
+        text-indent: 52px;
+        border: 1px solid #E9E9E9;
+        background: no-repeat 20px center #F4F4F4;
+        background-size: 24px 24px;
+    }
+
+    .shop_head_right_btn:nth-of-type(1) {
+        background-image: url(@/public/img/4.png);
+    }
+
+    .shop_head_right_btn:nth-of-type(2) {
+        background-image: url(@/public/img/5.png);
+    }
+
+    .shop_head_right_btn:hover {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+    }
+
+    .shop_head_right_btn:nth-of-type(1):hover {
+        background-image: url(@/public/img/4a.png);
+    }
+
+    .shop_head_right_btn:nth-of-type(2):hover {
+        background-image: url(@/public/img/5a.png);
+    }
+
+    .shop_head_right_btn_1_only {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+        background-image: url(@/public/img/4a.png) !important;
+    }
+
+    .shop_head_right_btn_2_only {
+        color: #fff;
+        background: no-repeat 20px center #A01C0E;
+        background-size: 24px 24px;
+        background-image: url(@/public/img/5a.png) !important;
+    }
+
+    .shop_head_right_btn:hover .shop_head_right_out {
+        display: block;
+    }
+
+    .shop_head_right_box {
+        background: #fff;
+        height: 1111px;
+        margin-top: 20px;
+    }
+
+    .shop_alert_out {
+        position: absolute;
+        width: 1036px;
+        right: 0px;
+        top: 99%;
+        z-index: 111;
+    }
+
+    .shop_alert_box {
+        background: #fff;
+        box-sizing: border-box;
+        padding: 0px 20px;
+        border: solid 1px #A01C0E;
+        width: 100%;
+        margin-top: 20px;
+    }
+
+    .shop_alert_head_box {}
+
+    .shop_alert_head_name_1 {
+        float: left;
+        font-weight: bold;
+        color: #A01C0E;
+        font-size: 20px;
+        margin-top: 30px;
+        letter-spacing: 1px;
+    }
+
+    .shop_alert_head_name_2 {
+        float: left;
+        color: #333;
+        font-size: 16px;
+        margin: 35px 0px 0px 10px;
+        position: relative;
+        padding-left: 22px;
+        font-weight: bold;
+    }
+
+    .shop_alert_head_name_2::after {
+        content: '';
+        display: block;
+        width: 14px;
+        height: 10px;
+        position: absolute;
+        left: 0px;
+        bottom: 3px;
+        background: url(@/public/img/16.png) no-repeat left 0px;
+        background-size: 100% 100%;
+    }
+
+    .shop_alert_head_btn_a {
+        float: right;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 14px;
+        padding: 0px 20px 0px 36px;
+        margin-top: 23px;
+        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
+        background-size: 14px auto;
+    }
+
+    .shop_alert_ul {
+        margin: 28px auto 0px;
+        width: 980px;
+    }
+
+    .shop_alert_li {
+        margin-bottom: 11px;
+        display: flex;
+    }
+
+    .shop_alert_li_label {
+        width: 150px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        padding-right: 24px;
+        font-weight: bold;
+        position: relative;
+        box-sizing: border-box;
+        margin-right: 20px;
+    }
+
+    .shop_alert_li_label::after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 22px;
+        height: 22px;
+        background: url(@/public/img/15.png) no-repeat right 0px;
+        background-size: 100% 100%;
+    }
+
+    .shop_alert_li_panel {}
+
+    .shop_alert_li_panel_a {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #666;
+        font-size: 16px;
+        margin: 0px 25px 10px 0px;
+    }
+
+    .shop_alert_li_panel_a:hover {
+        color: #A01C0E;
+    }
+
+    .shop_alert_1_index {
+        margin-top: 20px;
+    }
+
+    .shop_alert_img_ul {
+        margin-top: 30px;
+    }
+
+    .shop_alert_img_li {
+        float: left;
+        width: 314px;
+        margin: 0px 26px 30px 0px;
+        box-sizing: border-box;
+    }
+
+    .shop_alert_img_li_a {
+        display: block;
+        width: 100%;
+    }
+
+    .shop_alert_img_li_img {
+        width: 130px;
+        height: 130px;
+        margin-right: 10px;
+        float: left;
+    }
+
+    .shop_alert_img_li_right {
+        width: 173px;
+        float: right;
+    }
+
+    .shop_alert_img_li_h4 {
+        height: 18px;
+        line-height: 18px;
+        color: #333;
+        font-size: 14px;
+        font-weight: bold;
+        margin-top: 7px;
+    }
+
+    .shop_alert_img_li_dot3 {
+        height: 48px;
+        line-height: 16px;
+        color: #666;
+        font-size: 12px;
+        margin-top: 13px;
+    }
+
+    .shop_alert_img_li_time {
+        float: left;
+        height: 26px;
+        line-height: 26px;
+        color: rgba(51, 51, 51, 0.4);
+        font-size: 12px;
+        margin-top: 18px;
+        background: #f7f7f7;
+        padding: 0px 4px;
+    }
+
+    .shop_alert_img_li:nth-of-type(3n) {
+        margin-right: 0;
+    }
+
+    .shop_alert_img_li_a:hover * {
+        color: #A01C0E;
+    }
+}
+
+.shop_banner {
+    width: 1200px;
+    overflow: hidden;
+    margin: 20px auto 0px;
+
+    .shop_banner_a {
+        display: block;
+        width: 1200px;
+        height: 90px;
+    }
+
+    .shop_banner_img {
+        display: block;
+        width: 1200px;
+    }
+}
+
+.shop_nav {
+    border: solid 1px #E9E9E9;
+    background: #fafafa;
+    margin-top: 20px;
+}
+
+.shop_nav_head {
+    float: left;
+    height: 28px;
+    width: 138px;
+    margin: 30px 52px 0px 25px;
+
+    .shop_nav_head_a {
+        display: block;
+        height: 28px;
+        width: 138px;
+        background: url(@/public/img/7.png) no-repeat left top;
+        background-size: 100% 100%;
+    }
+}
+
+.shop_nav_in {
+    float: left;
+
+    .shop_nav_in_a {
+        float: left;
+        height: 75px;
+        line-height: 75px;
+        color: #333;
+        font-size: 16px;
+        background: #f8f5f5;
+        width: 118px;
+        border-bottom: solid 5px #A01C0E;
+        font-weight: bold;
+        margin: 5px 0;
+        text-align: center;
+    }
+
+    .shop_nav_in_a:nth-of-type(4) {
+        margin-right: 8px;
+    }
+
+    .shop_nav_in_a:hover {
+        color: #A01C0E;
+    }
+}
+
+.shop_name_in {
+    float: left;
+    height: 40px;
+    width: 1046px;
+    float: left;
+    box-sizing: border-box;
+
+    .shop_name_a {
+        float: left;
+        height: 27px;
+        line-height: 27px;
+        color: #222;
+        font-size: 20px;
+        position: relative;
+        margin: 7px 14.5px 0;
+        padding: 0px 10px;
+    }
+
+    .shop_name_a::after {
+        content: '/';
+        display: block;
+        position: absolute;
+        top: 0px;
+        right: -18px;
+        height: 100%;
+        line-height: 27px;
+        color: #E9E9E9;
+        font-size: 20px;
+    }
+
+    .shop_name_a:nth-last-of-type(1)::after {
+        content: '';
+        display: none;
+    }
+
+    .shop_name_a_only {
+        background: #A01C0E;
+        color: #fff;
+    }
+}
+
+.shop_name_out {
+    margin-top: 20px;
+}
+
+.shop_name_box {
+    border-top: solid 1px #fff;
+}
+
+.shop_name_box_a {
+    height: 44px;
+    line-height: 44px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.shop_name {
+    float: left;
+    height: 44px;
+    line-height: 44px;
+    color: #fff;
+    font-weight: bold;
+    position: relative;
+    z-index: 11;
+    text-align: center;
+    font-size: 20px;
+    background: #A01C0E;
+    padding: 0px 14px;
+}
+
+.shop_name_right {
+    height: 40px;
+    border-bottom: 1px solid #E8E9EC;
+    margin-top: 4px;
+    background: #F8F8F8;
+    position: relative;
+    z-index: 2;
+}
+
+.shop_name_right::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 100%;
+    width: 16px;
+    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
+    background-size: 100% auto;
+}
+
+.shop_name_btn {
+    width: 24px;
+    height: 24px;
+    float: right;
+    margin: 10px 22px 0px 0px;
+    background: url(@/public/img/8.png) no-repeat center center;
+    border-radius: 50%;
+    background-size: 100% 100%;
+}
+
+.shop_2_left {
+    float: left;
+    width: 900px;
+}
+
+.shop_3_right {
+    float: right;
+    width: 280px;
+}
+
+.shop_1_box {
+    margin: 30px auto 0px;
+}
+
+.shop_2_box {
+    margin: 30px auto 0px;
+}
+
+.shop_3_box {
+    margin: 0px auto 0px;
+}
+
+.shop_4_box {
+    margin: 4px auto 0px;
+}
+
+.shop_5_box {
+    margin: 4px auto 0px;
+}
+
+.categ_crumb_box {
+    margin-top: 20px;
+    border-bottom: solid 1px #D9D9D9;
+    padding-bottom: 20px;
+    position: relative;
+}
+
+.categ_crumb_left {
+    float: left;
+    height: 21px;
+    line-height: 21px;
+    color: #999;
+    font-size: 16px;
+
+    .categ_crumb_left_a {
+        display: inline-block;
+        height: 21px;
+        line-height: 21px;
+        color: #999;
+        font-size: 16px;
+    }
+
+    .categ_crumb_left_text {
+        display: inline-block;
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+    }
+}
+
+.categ_crumb_right {
+    float: right;
+
+    .categ_crumb_right_text {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+    }
+
+    .categ_crumb_right_btn {
+        float: left;
+        width: 14px;
+        height: 14px;
+        background-image: url(@/public/img/17.png);
+        margin: 5px 0px 0px 5px;
+    }
+}
+
+.categ_crumb_panel {
+    position: absolute;
+    border: solid 1px #A01C0E;
+    padding: 0px 30px 10px;
+    background: #fff;
+    right: 0px;
+    top: 0px;
+    box-sizing: border-box;
+    width: 658px;
+    top: 100%;
+
+    .categ_crumb_panel_h4 {
+        display: inline-block;
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        padding-right: 31px;
+        margin-top: 20px;
+        background: url(@/public/img/15.png) no-repeat right center;
+        background-size: 21px 21px;
+    }
+
+    .categ_crumb_panel_btn_box {
+        margin-top: 20px;
+    }
+
+    .categ_crumb_panel_btn {
+        float: left;
+        height: 21px;
+        line-height: 21px;
+        color: #666;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 0px 26.5px 11px 0px;
+    }
+
+    .categ_crumb_panel_btn:hover {
+        color: #A01C0E;
+    }
+
+    .categ_crumb_panel_btn_only {
+        color: #A01C0E;
+    }
+}
+
+.categ_grey_box {
+    box-sizing: border-box;
+    border: solid 1px #E9E9E9;
+    background: #F8F8F8;
+    padding: 0px 20px 8px;
+    width: 100%;
+    margin-top: 15px;
+
+    .categ_grey_head {
+        height: 48px;
+        line-height: 50px;
+        color: #000;
+        font-size: 18px;
+        border-bottom: dashed 1px #E9E9E9;
+    }
+
+    .categ_grey_ul {
+        margin: 10px 0px 0px -10px;
+    }
+
+    .categ_grey_btn {
+        float: left;
+        line-height: 29px;
+        height: 29px;
+        color: #333;
+        font-size: 16px;
+        margin: 0px 10px 7px;
+    }
+
+    .categ_grey_btn_only {
+        background: #A01C0E;
+        color: #fff;
+        padding: 0px 5px 0px;
+        margin: 0px 5px 7px;
+    }
+}
+
+.categ_head_box {
+    border-bottom: solid 1px #E9E9E9;
+    padding-bottom: 22px;
+    margin-top: 20px;
+    border-top: solid 1px rgba(0, 0, 0, 0);
+
+    .categ_head_a {
+        float: left;
+        text-indent: 15px;
+        font-size: 20px;
+        color: #333;
+        border-left: solid 3px #A01C0E;
+        height: 18px;
+        line-height: 18px;
+    }
+
+    .categ_head_a_more {
+        float: right;
+        color: #999;
+        font-size: 14px;
+        margin-top: 0px;
+        cursor: pointer;
+    }
+}
+
+.categ_table {}
+
+.categ_table_head_box {
+    height: 61px;
+    border-bottom: solid 1px #E9E9E9;
+}
+
+.categ_table_head_box>.categ_table_td_1 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_head_box>.categ_table_td_2 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_head_box>.categ_table_td_3 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_head_box>.categ_table_td_4 {
+    line-height: 61px;
+    line-height: 61px;
+}
+
+.categ_table_td_1 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 155px;
+    margin-right: 126px;
+}
+
+.categ_table_td_2 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 480px;
+    margin-right: 124px;
+}
+
+.categ_table_td_3 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 120px;
+    margin-right: 62px;
+}
+
+.categ_table_td_4 {
+    float: left;
+    height: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 16px;
+    width: 133px;
+}
+
+/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
+.categ_table_li {
+    height: 161px;
+    box-sizing: border-box;
+    padding: 15px 0px;
+    border-bottom: solid 1px #E9E9E9;
+}
+
+.categ_table_td_1_img {
+    display: block;
+    width: 130px;
+    height: 130px;
+    margin: 0px auto;
+}
+
+.categ_table_li .categ_table_td_1 {
+    line-height: 160px;
+    line-height: 160px;
+}
+
+.categ_table_li .categ_table_td_2 {
+    line-height: 160px;
+    line-height: 160px;
+    font-weight: bold;
+    color: #333;
+}
+
+.categ_table_li .categ_table_td_3 {
+    line-height: 160px;
+    line-height: 160px;
+}
+
+.categ_table_li .categ_table_td_4 {
+    line-height: 160px;
+    line-height: 160px;
+}
+
+.categ_3_index {
+    margin-top: 28px;
+}
+
+.categ_ul_img_1 {
+    margin-top: 20px;
+}
+
+.categ_li_img_1 {
+    float: left;
+    margin: 0px 24px 20px 0px;
+    width: 180px;
+    position: relative;
+}
+
+.categ_li_img_1_a {}
+
+.categ_li_img_1_img {
+    display: block;
+    width: 180px;
+    height: 180px;
+}
+
+.categ_li_img_1_dot2 {
+    width: 168px;
+    margin: 10px auto 0px;
+    height: 32px;
+    line-height: 16px;
+    color: #333;
+    font-size: 14px;
+}
+
+.categ_li_img_1:nth-of-type(6n) {
+    margin-right: 0px;
+}
+
+.categ_li_img_1_hover_dot1 {
+    width: 152px;
+    position: absolute;
+    left: 50%;
+    margin-left: -76px;
+    bottom: 13px;
+    font-size: 14px;
+    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.categ_li_img_1:hover .categ_li_img_1_dot2 {
+    color: #A01C0E;
+}
+
+.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/18.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/19.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background: url(@/public/img/20.png) no-repeat left 0px;
+    background-size: 100% 100%;
+    width: 32px;
+    height: 32px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+}
+
+.categ_ul_img_2 {
+    margin-top: 20px;
+}
+
+.categ_li_img_2 {
+    float: left;
+    margin: 0px 24px 20px 0px;
+    width: 180px;
+    position: relative;
+}
+
+.categ_li_img_2_a {}
+
+.categ_li_img_2_img {
+    display: block;
+    width: 180px;
+    height: 180px;
+}
+
+.categ_li_img_2_dot2 {
+    width: 168px;
+    margin: 10px auto 0px;
+    height: 32px;
+    line-height: 16px;
+    color: #333;
+    font-size: 14px;
+}
+
+.categ_li_img_2:nth-of-type(6n) {
+    margin-right: 0px;
+}
+
+.categ_li_img_2_hover_dot1 {
+    width: 152px;
+    position: absolute;
+    left: 50%;
+    margin-left: -76px;
+    bottom: 13px;
+    font-size: 14px;
+    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.categ_li_img_2:hover .categ_li_img_2_dot2 {
+    color: #A01C0E;
+}
+
+/*乡村网-商城-搜索-查看更多*/
+.search_head_text_box {
+    height: 18px;
+    line-height: 18px;
+    color: #333;
+    font-size: 16px;
+    float: left;
+    margin-left: 20px;
+}
+
+.search_head_text_red {
+    color: #A01C0E;
+}
+
+.search_table_td_2 {
+    float: left;
+    height: 100%;
+    width: 480px;
+    margin-right: 124px;
+
+    .search_table_td_2_head {
+        height: 21px;
+        line-height: 21px;
+        color: #333;
+        font-size: 16px;
+        font-weight: bold;
+        width: 480px;
+    }
+
+    .search_table_td_2_dot2 {
+        max-height: 36px;
+        line-height: 18px;
+        color: #999;
+        font-size: 14px;
+        margin-top: 5px;
+        width: 480px;
+    }
+
+    .search_table_td_2_in {
+        height: 129px;
+        width: 480px;
+        display: table-cell;
+        vertical-align: middle;
+    }
+}
+
+@media screen and (min-width:1200px) {
+    /*pc_1440*/
+    @media screen and (max-width:1440px) {
+        /*1200*/
+    }
+
+    .pc_none {
+        display: none;
+    }
+}
+
+@media screen and (max-width:599px) {}
+
+@media screen and (max-width:320px) {}

components/shop/noData.vue

@@ -5,6 +5,12 @@
             <div class="nodata_style1_box_text">暂无商品数据</div>
         </div>
    </div>
+   <div v-else-if="pagetype == 'list'" class="nodata_style2">
+        <div class="nodata_style1_box">
+            <img src="@/public/image/Union.png" alt="暂无商品数据">
+            <div class="nodata_style1_box_text">暂无商品数据</div>
+        </div>
+   </div>
 </template>
 
 <script setup>
@@ -45,4 +51,31 @@
             }
         }
     }
+    .nodata_style2{
+        width: 1200px;
+        height: 600px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .nodata_style1_box{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 265px;
+            height: 80px;
+            .nodata_style1_box_text {
+                width: 159px;
+                height: 34px;
+                line-height: 34px;
+                font-size: 26px;
+                color:#CCCCCC
+            }
+            img{
+                display: block;
+                width: 49px;
+                height: 56px;
+                margin-right: 30px;
+            }
+        }
+    }
 </style>

components/shop/pageHead.vue

@@ -86,7 +86,7 @@
                                     <NuxtLink 
                                         class="shop_alert_li_panel_a"
                                         v-for="i in item.children"
-                                        :to="`/${item.aLIas_pinyin}/gongying/index.html`" 
+                                        :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/${i.aLIas_pinyin}/gongying/list-1.html`" 
                                         :title="item.name"
                                     >
                                         {{ i.alias }}
@@ -140,7 +140,7 @@
                                     <NuxtLink 
                                         class="shop_alert_li_panel_a"
                                         v-for="i in item.children"
-                                        :to="`/${item.aLIas_pinyin}/qiugou/list-1.html`" 
+                                        :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/${i.aLIas_pinyin}/qiugou/list-1.html`" 
                                         :title="item.name"
                                     >
                                         {{ i.alias }}
@@ -894,6 +894,7 @@ header {
         border: 1px solid #E9E9E9;
         background: no-repeat 20px center #F4F4F4;
         background-size: 24px 24px !important;
+        cursor: pointer;
     }
 }
 
@@ -1009,6 +1010,7 @@ header {
     margin-top: 23px;
     background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
     background-size: 14px auto;
+    cursor: pointer;
 }
 
 .shop_alert_ul {
@@ -1021,7 +1023,7 @@ header {
     display: flex;
 
     .shop_alert_li_label {
-        width: 170px;
+        width: 120px;
         line-height: 21px;
         color: #333;
         font-size: 16px;

components/shop/subMenu2.vue

@@ -83,7 +83,7 @@ getShowNav();
 
 //1.2 标记当前选择的地区
 const route = useRoute();
-const router = useRouter()
+const router = useRouter();
 //获得详情id
 const cityId = ref(route.query.cityid)
 
@@ -110,6 +110,8 @@ if (getRouteId.code == 200) {
 
 //1.4设置url中的参数
 const setUrlParam = (item) => {
+    //获得当前的url
+    const currentUrl = window.location.href;
     //判断url中是否含有select参数，如果有就删掉
     cityId.value = item.id;
     // 复制当前的 query 对象
@@ -122,6 +124,7 @@ const setUrlParam = (item) => {
     }
     // 使用 router.replace 更新 URL
     router.replace({
+        path: route.path,
         query: newQuery
     });
 }

pages/[dir]/index.html.vue

@@ -210,11 +210,11 @@
                                     <li class="content_right_list" v-for="(item, index) in pageData[4].data2"
                                         :key="index">
                                         <NuxtLink to="#">
-                                            <div class="part3_time">
+                                            <!-- <div class="part3_time">
                                                 <span class="month">{{ getTime(item.updated_at, 'day', 1) }}</span>
                                                 <span class="xiegang">/</span>
                                                 <span class="day">{{ getTime(item.updated_at, 'month', 1) }}</span>
-                                            </div>
+                                            </div> -->
                                             <div class="time_left_content">
                                                 <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
                                                     {{ item.title }}

pages/index.vue

@@ -716,11 +716,11 @@
                                 <ul class="content_top_right">
                                     <li class="content_right_list" v-for="item in boxData15data2">
                                         <NuxtLink to="#">
-                                            <div class="part5_time">
+                                            <!-- <div class="part5_time">
                                                 <span class="month">{{ getTime(item.updated_at, 'day', 1) }}</span>
                                                 <span class="xiegang">/</span>
                                                 <span class="day">{{ getTime(item.updated_at, 'month', 1) }}</span>
-                                            </div>
+                                            </div> -->
                                             <div class="time_left_content">
                                                 <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                                     :target="item.islink == 1 ? '_blank' : '_self'">
@@ -753,11 +753,11 @@
                                 <ul class="content_top_right">
                                     <li class="content_right_list" v-for="item in boxData16data2">
                                         <NuxtLink to="#">
-                                            <div class="part5_time">
+                                            <!-- <div class="part5_time">
                                                 <span class="month">{{ getTime(item.updated_at, 'day', 1) }}</span>
                                                 <span class="xiegang">/</span>
                                                 <span class="day">{{ getTime(item.updated_at, 'month', 1) }}</span>
-                                            </div>
+                                            </div> -->
                                             <div class="time_left_content">
                                                 <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                                     :target="item.islink == 1 ? '_blank' : '_self'">
@@ -1395,7 +1395,7 @@ let getJson = [
     { "parent": $pageNav[11] + ",1,5", "child": "" },//模块12 乡村名企407
     { "parent": $pageNav[12] + ",1,5", "child": "" },//模块13 特色乡村331 
     { "parent": $pageNav[13] + ",1,13", "child": $pageNav[13] + ",1,1" },//模块14 产业集群330
-    { "parent": $pageNav[14] + ",1,10", "child": "" },//模块15 三农人物18
+    { "parent": $pageNav[14] + ",1,13", "child": "" },//模块15 三农人物18
     { "parent": $pageNav[15] + ",1,10", "child": "" },//模块16 三农名企335
     { "parent": $pageNav[16] + ",3,10", "child": "" },//模块17 农技推广348
     { "parent": $pageNav[17] + ",3,10", "child": "" },//模块18 致富信息23

pages/xiangcunshangcheng/[dir]/[dir]/gongying/[id].html.vue

@@ -0,0 +1,210 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <ShopSubMenu></ShopSubMenu>
+        <!-- 当前位置 -->
+        <div class="categ_crumb_box clearfix_2">
+            <div class="categ_crumb_left">
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment1}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name1}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment1}/${targetSegment2}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name2}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment1}/${targetSegment2}/gongying/list-1.html`"
+                    class="categ_crumb_left_a"
+                >
+                    供应
+                </NuxtLink>
+                &gt;
+                <span class="categ_crumb_left_text">{{shopData.name}}</span>
+            </div>
+        </div>
+
+        <div class="supply_1_index clearfix">
+            <img class="supply_1_img" :src="shopImg" :alt="shopData.name">
+            <div class="supply_1_right">
+                <h4 class="supply_1_h4">{{shopData.name}}</h4>
+                <div class="supply_1_title_box clearfix">
+                    <time class="supply_1_title"> 更新日期：{{shopData.updated_at}}</time>
+                    <span class="supply_1_title">浏览次数：{{ shopData.hits }}</span>
+                </div>
+                <div class="supply_1_ul clearfix">
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">公 司 名</label><span
+                            class="supply_1_li_text "></span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">所 在 地</label><span
+                            class="supply_1_li_text ">{{ shopData.address }}</span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">联 系 人</label><span
+                            class="supply_1_li_text ">{{ shopData.contact}}</span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">产品单价</label><span
+                            class="supply_1_li_text ">{{shopData.price}}元/{{ shopData.unit }}</span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">最小定量</label><span
+                            class="supply_1_li_text ">{{ shopData.min }}</span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">供货总量</label><span
+                            class="supply_1_li_text ">{{shopData.max}}</span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">有 效 期</label><span
+                            class="supply_1_li_text ">{{getValidityTime(shopData)}}</span></div>
+                </div>
+            </div>
+        </div>
+        <div class="supply_2_index clearfix">
+
+            <div class="supply_head_box clearfix_2">
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 1 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 1">详情信息</a>
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 2 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 2">联系方式</a>
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 3 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 3">图片展示</a>
+            </div>
+
+            <div class="supply_art_out clearfix">
+                <!-- 详情信息 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 1" v-html="shopData.detail"></div>
+                <!-- 联系方式 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 2">
+                    <p class="supply_art_box_p">公司名：</p>
+                    <p class="supply_art_box_p">联系人：{{shopData.contact}}</p>
+                    <p class="supply_art_box_p">电话：{{shopData.phone}}</p>
+                    <p class="supply_art_box_p">邮箱：{{shopData.email}}</p>
+                    <p class="supply_art_box_p">邮政编码：{{shopData.postal}}</p>
+                    <p class="supply_art_box_p">详细地址：{{shopData.address}}</p>
+                </div>
+                <!-- 图片展示 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 3">
+                    <div class="supply_art_box_img">
+                        <img :src="item" v-for="item in shopData.imgurl">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <ShopHotNews></ShopHotNews>
+    </main>
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup } from 'element-plus'
+//1.2选项卡 
+const supply_choice_1_num = ref(1)
+//1.3是否展示有效期
+const getValidityTime = (shopData) => {
+    if(shopData.islong==1){
+        return "无期限"
+    }else{
+        if(shopData.validity){
+            return shopData.validity.split(' ')[0];
+        }
+    }
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+
+//2.2 获得第一层面包屑地址
+let articleId1 = 0;
+const name1 = ref('') 
+const targetSegment1 = getRoutePath(2);
+//通过导航路径反向查询导航id
+const getRouteId1 = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment1,
+    },
+});
+if(getRouteId1.code == 200){
+    articleId1 = getRouteId1.data.category_id;
+    name1.value = getRouteId1.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.3 获得第二层面包屑地址
+let articleId2 = 0;
+const name2 = ref('') 
+const targetSegment2 = getRoutePath(3);
+//通过导航路径反向查询导航id
+const getRouteId2 = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment2,
+    },
+});
+if(getRouteId2.code == 200){
+    articleId2 = getRouteId2.data.category_id;
+    name2.value = getRouteId2.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+//2.页面路径 end ---------------------------------------->
+
+//3.获得商品详情 start ---------------------------------------->
+const shopId = ref(route.params.id) //获得商品的id
+const shopData = ref({});
+const shopImg = ref("")
+
+let getShopData = async () => {
+    const shopReq = await requestDataPromise('/web/getWebsiteshopInfo', {
+        method: 'GET',
+        query: {
+            'id': parseFloat(shopId.value),
+        },
+    });
+
+    if (shopReq.code == 200) {
+        console.log(667788)
+        console.log(shopReq)
+        shopData.value = shopReq.data
+        shopImg.value = shopReq.data.imgurl[0]
+    } else {
+        console.log("错误位置：获得商品详情")
+    }
+}
+getShopData();
+//3.获得商品详情 end  ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopdetail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
+<style lang="less" scoped>
+@import '@/assets/css/shop/detail.less';
+</style>

pages/xiangcunshangcheng/[dir]/[dir]/gongying/list-[id].html.vue

@@ -0,0 +1,422 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <!--子菜单和地区选择-->
+        <ShopSubMenu2></ShopSubMenu2>
+        <!-- 地区选择 -->
+        <div class="categ_crumb_box clearfix_2">
+            <!-- 当前位置 -->
+            <div class="categ_crumb_left">
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/${targetSegment2}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name2}}
+                </NuxtLink>
+                &gt;
+                <span class="categ_crumb_left_text">供应</span>
+            </div>
+            <!-- 当前位置 -->
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_right clearfix" v-if="cityList.length > 0">
+                <div class="categ_crumb_right_text">当前商品所在地：</div>
+                <div class="categ_crumb_right_text hand">{{cityName}}</div>
+                <div class="categ_crumb_right_btn back100 hand" @click="btn_if_categ_crumb_panel_fun" tabindex="1"
+                    @blur="categ_crumb_panel_btn_blur_fun">
+                </div>
+            </div>
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_panel" v-show="if_categ_crumb_panel" tabindex="0"
+                @click="categ_crumb_panel_focus_fun" @blur="categ_crumb_panel_blur_fun">
+                <h4 class="categ_crumb_panel_h4">您可以选择以下详细地区</h4>
+                <div class="categ_crumb_panel_btn_box clearfix">
+                    <span 
+                        class="categ_crumb_panel_btn hand"
+                        :class="{ categ_crumb_panel_btn_only: item.id == chooseCityId }"
+                        v-for="item in cityList"
+                        @click="chooseCity(item.id)"
+                    >
+                        {{ item.name }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        <!-- 您可以选择以下详细分类 -->
+        <!-- <div class="categ_grey_box clearfix" v-if="secondNav.length > 0">
+            <div class="categ_grey_head">您可以选择以下详细分类：</div>
+            <div class="categ_grey_ul clearfix">
+                <span 
+                    :class="['categ_grey_btn hand', { 'categ_grey_btn_only': selectedSecondId == item.category_id }]"
+                    v-for="item in secondNav"
+                    @click="selectSecond(item)"
+                >
+                    {{ item.alias }}
+                </span>
+            </div>
+        </div> -->
+        <!-- 您可以选择以下详细分类 -->
+
+        <!-- 供应信息列表 -->
+        <div class=" clearfix">
+            <div class="categ_1_index clearfix">
+                <div class="categ_head_box clearfix_2">
+                    <a class="categ_head_a" href="" title="">供应信息列表</a>
+                </div>
+                <div class="categ_table clearfix">
+                    <div class="categ_table_head_box">
+                        <div class="categ_table_td_1">产品图片</div>
+                        <div class="categ_table_td_2">供求信息/公司</div>
+                        <div class="categ_table_td_3">发布时间</div>
+                        <div class="categ_table_td_4">地区</div>
+                    </div>
+                    <ShopNoData v-if="pageDataType1.length == 0" :pagetype="'list'"></ShopNoData>
+                    <div class="categ_table_li" v-for="item in pageDataType1">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
+                            <div class="categ_table_td_1">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" :alt="item.name">
+                            </div>
+                            <div class="search_table_td_2 ">
+                                <div class="search_table_td_2_in clearfix">
+                                    <div class="search_table_td_2_head dot1">
+                                        {{ item.name }}
+                                    </div>
+                                    <div class="search_table_td_2_dot2 dot2">
+                                        {{ item.description }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="categ_table_td_3">{{ getTime(item.created_at, 'year', 1) }}</div>
+                            <div class="categ_table_td_4 dot1">{{ item.city_name }}</div>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <!-- 分页器 -->
+            <div class="pagination" v-if="total">
+                <el-pagination 
+                    size="small" 
+                    background layout="prev, pager, next" 
+                    :total="total"
+                    v-model:page-size="pageSize" 
+                    prev-text="上一页" 
+                    next-text="下一页" 
+                    :current-page="pageNum"
+                    @current-change="changePage" 
+                />
+            </div>
+        </div>
+        <ShopHotNews></ShopHotNews>
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage,ElPagination } from 'element-plus'
+
+//分页
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/xiangcunshangcheng/${targetSegment}/${targetSegment2}/gongying/list-${value}.html`)
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+
+//2.2 获得第一层面包屑地址
+let articleId = 0; //把路径转换为数据id
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+const name = ref('') //当前频道名称
+let getPageName = async () => {
+    const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId
+        },
+    });
+    if (pageName.code == 200) {
+        name.value = pageName.data.alias
+    } else {
+        console.log("错误位置：获取当前频道名称", pageName.message)
+    }
+}
+getPageName();
+
+//2.3 获得第二层面包屑地址
+let articleId2 = 0; //把路径转换为数据id
+const targetSegment2 = getRoutePath(3);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId2 = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment2,
+    },
+});
+if(getRouteId2.code == 200){
+    articleId2 = getRouteId2.data.category_id
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+const name2 = ref('') 
+let getPageName2 = async () => {
+    const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId2
+        },
+    });
+    if (pageName.code == 200) {
+        name2.value = pageName.data.alias
+    } else {
+        console.log("错误位置：获取当前频道名称", pageName.message)
+    }
+}
+getPageName2();
+
+
+//2.4 获得子栏目列表
+// const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+// let getSecondNav = async () => {
+//     const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+//         method: 'GET',
+//         query: {
+//             'placeid': 1,
+//             'pid': articleId,
+//             'num': 50,
+//         },
+//     });
+//     if (listData.code == 200) {
+//         secondNav.value = listData.data
+//     } else {
+//         console.log("错误位置：获得子级栏目列表")
+//     }
+// }
+// getSecondNav();
+
+//2.5 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.选择商品所在地 start ---------------------------------------->
+//3.1 弹出下拉框
+const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
+const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
+const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
+    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
+}
+const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
+    setTimeout(() => {
+        if (if_categ_crumb_panel_click.value == true) {
+            //点击在下拉panel内
+        } else {
+            //没点击在下拉panel内
+            if_categ_crumb_panel.value = false
+        }
+    }, 100);
+}
+//3.2 点击下拉panel
+const categ_crumb_panel_focus_fun = () => {
+    if_categ_crumb_panel_click.value = true
+    if_categ_crumb_panel.value = true
+}
+//3.3 下拉panel失去焦点事件
+const categ_crumb_panel_blur_fun = () => {
+    if_categ_crumb_panel_click.value = false
+    if_categ_crumb_panel.value = false
+}
+
+//3.4 获得详细地址列表
+const cityName = ref('')
+const cityList = ref([])
+const chooseCityId = ref('')
+let getCityList = async (id) => {
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    if(shengData.code==200){
+        cityList.value = shengData.data;
+        cityName.value = shengData.data[0].pid_name;
+    }else{
+        ElMessage.error(shengData.message)
+    }
+}
+//3.5 初始化的时候先获取一下城市列表
+if(cityId.value != undefined){
+    getCityList(cityId.value);
+}
+//3.6 选择城市
+const chooseCity = (id) => {
+    chooseCityId.value = id;
+    router.replace({
+        query: { 
+            ...route.query, 
+            select: id
+        }
+    })
+}
+//3.选择商品所在地 end ---------------------------------------->
+
+//4.搜索 start ---------------------------------------->
+//4.1 选择一个子导航
+const selectSecond = (item) => {
+    //高亮显示当前选中的子导航
+    selectedSecondId.value = item.category_id
+    router.replace({
+        query: { ...route.query, catid: item.category_id }
+    })
+}
+
+//4.2 页面展示的数据
+const pageDataType1 = ref([]);//供应数据
+//const pageDataType2 = ref([]);//求购数据 此页面不需要求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:"",//栏目id
+        city_id:"",//城市id
+        keyword:"",//搜索关键词 - 该页不需要
+        page:1,
+        pageSize:10,
+        type_id:1//1:供应 2:求购
+    }
+
+    if(selectedSecondId.value == undefined){
+        params.catid = articleId2
+    }else{
+        params.catid = parseFloat(selectedSecondId.value)
+    }
+
+    let routeCiteId = route.query.select;
+
+    if(routeCiteId != undefined && routeCiteId != ''){
+        params.city_id = parseFloat(routeCiteId)
+    }else{
+        if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+            //删除变量params中的city_id参数
+            delete params.city_id
+        }else{
+            params.city_id = parseFloat(cityId.value)
+        }
+    }
+
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        pageDataType1.value = pageData.data.type1;
+        //pageDataType2.value = pageData.data.type2;
+        total.value = pageData.data.type1_count;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+        getCityList(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.4.2 监听catid
+watch(() => route.query.catid, (newVal, oldVal) => {
+    pageSearch()
+})
+//4.4.3 监听select
+//如果路由中存在select参数就忽略cityid
+watch(() => route.query.select, (newVal, oldVal) => {
+    if(newVal != undefined){
+        pageSearch()
+    }else{
+        chooseCityId.value = '';
+        pageSearch()
+    }
+})
+//4.搜索 end ---------------------------------------->
+
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
+
+
+<style lang="less" scoped>
+@import '@/assets/css/shop/list.less';
+</style>

pages/xiangcunshangcheng/[dir]/[dir]/index.html.vue

@@ -0,0 +1,468 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <!--子菜单和地区选择-->
+        <ShopSubMenu2></ShopSubMenu2>
+        <!-- 地区选择 -->
+        <div class="categ_crumb_box clearfix_2">
+            <!-- 当前位置 -->
+            <div class="categ_crumb_left">
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
+                &gt;
+                <span class="categ_crumb_left_text">{{name2}}</span>
+            </div>
+            <!-- 当前位置 -->
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_right clearfix" v-if="cityList.length > 0">
+                <div class="categ_crumb_right_text">当前商品所在地：</div>
+                <div class="categ_crumb_right_text hand">{{cityName}}</div>
+                <div class="categ_crumb_right_btn back100 hand" @click="btn_if_categ_crumb_panel_fun" tabindex="1"
+                    @blur="categ_crumb_panel_btn_blur_fun">
+                </div>
+            </div>
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_panel" v-show="if_categ_crumb_panel" tabindex="0"
+                @click="categ_crumb_panel_focus_fun" @blur="categ_crumb_panel_blur_fun">
+                <h4 class="categ_crumb_panel_h4">您可以选择以下详细地区</h4>
+                <div class="categ_crumb_panel_btn_box clearfix">
+                    <span 
+                        class="categ_crumb_panel_btn hand"
+                        :class="{ categ_crumb_panel_btn_only: item.id == chooseCityId }"
+                        v-for="item in cityList"
+                        @click="chooseCity(item.id)"
+                    >
+                        {{ item.name }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        <!-- 您可以选择以下详细地区 -->
+        <div class="categ_grey_box clearfix" v-if="secondNav.length > 0">
+            <div class="categ_grey_head">您可以选择以下详细分类：</div>
+            <div class="categ_grey_ul clearfix">
+                <span 
+                    :class="['categ_grey_btn hand', { 'categ_grey_btn_only': selectedSecondId == item.category_id }]"
+                    v-for="item in secondNav"
+                    @click="selectSecond(item)"
+                >
+                    {{ item.alias }}
+                </span>
+            </div>
+        </div>
+        <!-- 您可以选择以下详细地区 -->
+        <!-- 供应信息列表 -->
+        <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
+        <div class=" clearfix">
+            <div class="categ_1_index clearfix">
+                <div class="categ_head_box clearfix_2">
+                    <span class="categ_head_a">供应信息列表</span>
+                    <span class="categ_head_a_more" @click="pageShopList(1)" v-if="pageDataType1.length != 0">
+                        查看更多 &gt;
+                    </span>
+                </div>
+                <div class="categ_table clearfix">
+                    <div class="categ_table_head_box">
+                        <div class="categ_table_td_1">产品图片</div>
+                        <div class="categ_table_td_2">供求信息/公司</div>
+                        <div class="categ_table_td_3">发布时间</div>
+                        <div class="categ_table_td_4">地区</div>
+                    </div>
+                    <ShopNoData v-if="pageDataType1.length == 0" :pagetype="'class'"></ShopNoData>
+                    <div class="categ_table_li" v-for="item in pageDataType1" :key="item.id">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
+                            <div class="categ_table_td_1">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" alt="item.name">
+                            </div>
+                            <div class="search_table_td_2 ">
+                                <div class="search_table_td_2_in clearfix">
+                                    <div class="search_table_td_2_head dot1">
+                                        {{ item.name }}
+                                    </div>
+                                    <div class="search_table_td_2_dot2 dot2">
+                                        {{ item.description }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="categ_table_td_3">{{getTime(item.created_at, 'year', 1)}}</div>
+                            <div class="categ_table_td_4 dot1">{{item.city_name}}</div>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class=" clearfix">
+            <div class="categ_1_index clearfix">
+                <div class="categ_head_box clearfix_2">
+                    <span class="categ_head_a">求购信息列表</span>
+                    <span class="categ_head_a_more" @click="pageShopList(2)" v-if="pageDataType2.length != 0">
+                        查看更多 &gt;
+                    </span>
+                </div>
+                <div class="categ_table clearfix">
+                    <div class="categ_table_head_box">
+                        <div class="categ_table_td_1">产品图片</div>
+                        <div class="categ_table_td_2">供求信息/公司</div>
+                        <div class="categ_table_td_3">发布时间</div>
+                        <div class="categ_table_td_4">地区</div>
+                    </div>
+                    <ShopNoData v-if="pageDataType2.length == 0" :pagetype="'class'"></ShopNoData>
+                    <div class="categ_table_li" v-for="item in pageDataType2" :key="item.id">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
+                            <div class="categ_table_td_1">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" alt="item.name">
+                            </div>
+                            <div class="search_table_td_2 ">
+                                <div class="search_table_td_2_in clearfix">
+                                    <div class="search_table_td_2_head dot1">
+                                        {{ item.name }}
+                                    </div>
+                                    <div class="search_table_td_2_dot2 dot2">
+                                        {{ item.description }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="categ_table_td_3">{{getTime(item.created_at, 'year', 1)}}</div>
+                            <div class="categ_table_td_4 dot1">{{item.city_name}}</div>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <ShopHotNews></ShopHotNews>
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage } from 'element-plus'
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+//第一层路径
+let articleId = 0; //把路径转换为数据id
+//第二层路径
+let articleId2 = 0;
+
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+const targetSegment2 = getRoutePath(3);//返回第二层的路径id
+
+//2.3 获得子栏目列表
+const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+
+//通过导航路径反向查询第一层导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//通过导航路径反向查询第二层导航id
+const getRouteId2 = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment2,
+    },
+});
+if(getRouteId2.code == 200){
+    articleId2 = getRouteId2.data.category_id
+    selectedSecondId.value = getRouteId2.data.category_id
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.2 生成面包屑导航 
+const name = ref('') //当前频道名称
+let getPageName = async () => {
+    const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId
+        },
+    });
+    if (pageName.code == 200) {
+        name.value = pageName.data.alias
+    } else {
+        console.log("错误位置：获取当前频道名称", pageName.message)
+    }
+}
+getPageName();
+
+const name2 = ref('') //当前频道名称
+let getPageName2 = async () => {
+    const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId2
+        },
+    });
+    if (pageName.code == 200) {
+        name2.value = pageName.data.alias
+    } else {
+        console.log("错误位置：获取当前频道名称", pageName.message)
+    }
+}
+getPageName2();
+
+
+
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': articleId,
+            'num': 50,
+        },
+    });
+    if (listData.code == 200) {
+        secondNav.value = listData.data
+    } else {
+        console.log("错误位置：获得子级栏目列表")
+    }
+}
+getSecondNav();
+
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.选择商品所在地 start ---------------------------------------->
+//3.1 弹出下拉框
+const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
+const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
+const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
+    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
+}
+const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
+    setTimeout(() => {
+        if (if_categ_crumb_panel_click.value == true) {
+            //点击在下拉panel内
+        } else {
+            //没点击在下拉panel内
+            if_categ_crumb_panel.value = false
+        }
+    }, 100);
+}
+//3.2 点击下拉panel
+const categ_crumb_panel_focus_fun = () => {
+    if_categ_crumb_panel_click.value = true
+    if_categ_crumb_panel.value = true
+}
+//3.3 下拉panel失去焦点事件
+const categ_crumb_panel_blur_fun = () => {
+    if_categ_crumb_panel_click.value = false
+    if_categ_crumb_panel.value = false
+}
+
+//3.4 获得详细地址列表
+const cityName = ref('')
+const cityList = ref([])
+const chooseCityId = ref('')
+let getCityList = async (id) => {
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    if(shengData.code==200){
+        cityList.value = shengData.data;
+        cityName.value = shengData.data[0].pid_name;
+    }else{
+        ElMessage.error(shengData.message)
+    }
+}
+//3.5 初始化的时候先获取一下城市列表
+if(cityId.value != undefined){
+    getCityList(cityId.value);
+}
+//3.6 选择城市
+const chooseCity = (id) => {
+    chooseCityId.value = id;
+    router.replace({
+        path: route.path,
+        query: { 
+            ...route.query, 
+            select: id
+        }
+    })
+}
+//3.选择商品所在地 end ---------------------------------------->
+
+//4.搜索 start ---------------------------------------->
+//4.1 选择一个子导航
+const selectSecond = (item) => {
+    //高亮显示当前选中的子导航
+    selectedSecondId.value = item.category_id
+    router.push({
+        path: `/xiangcunshangcheng/${targetSegment}/${item.aLIas_pinyin}/index.html`,
+        //query: { ...route.query, catid: item.category_id }
+    })
+}
+
+//4.2 页面展示的数据
+const pageDataType1 = ref([]);//供应数据
+const pageDataType2 = ref([]);//求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:"",//栏目id
+        city_id:"",//城市id
+        keyword:"",//搜索关键词 - 该页不需要
+        page:1,
+        pageSize:3,
+        //type_id:1//1:供应 2:求购
+    }
+
+    if(selectedSecondId.value == undefined){
+        params.catid = articleId
+    }else{
+        params.catid = parseFloat(selectedSecondId.value)
+    }
+
+    let routeCiteId = route.query.select;
+
+    if(routeCiteId != undefined && routeCiteId != ''){
+        params.city_id = parseFloat(routeCiteId)
+    }else{
+        if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+            //删除变量params中的city_id参数
+            delete params.city_id
+        }else{
+            params.city_id = parseFloat(cityId.value)
+        }
+    }
+
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        pageDataType1.value = pageData.data.type1;
+        pageDataType2.value = pageData.data.type2;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+        getCityList(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.4.2 监听catid
+watch(() => route.query.catid, (newVal, oldVal) => {
+    pageSearch()
+})
+//4.4.3 监听select
+//如果路由中存在select参数就忽略cityid
+watch(() => route.query.select, (newVal, oldVal) => {
+    if(newVal != undefined){
+        pageSearch()
+    }else{
+        chooseCityId.value = '';
+        pageSearch()
+    }
+})
+//4.搜索 end ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+
+
+//6.跳转到列表页 start ---------------------------------------->
+const pageShopList = (type) => {
+    const { catid, cityid, select } = route.query
+
+    const queryParams = {
+        ...(catid && { catid }),
+        ...(cityid && { cityid }),
+        ...(select && { select })
+    }
+
+    if(type == 1){
+        //type==1 跳转到供应列表页
+        const targetPath = `/xiangcunshangcheng/${targetSegment}/${targetSegment2}/gongying/list-1.html`
+        router.push({
+            path: targetPath,
+            query: queryParams
+        })
+    }else{
+        //type==2 跳转到求购列表页
+        const targetPath = `/xiangcunshangcheng/${targetSegment}/${targetSegment2}/qiugou/list-1.html`
+        router.push({
+            path: targetPath,
+            query: queryParams
+        })
+    }
+}
+//6.跳转到列表页 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+@import '@/assets/css/shop/class.less';
+</style>

pages/xiangcunshangcheng/[dir]/[dir]/qiugou/[id].html.vue

@@ -0,0 +1,319 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <ShopSubMenu></ShopSubMenu>
+        <!-- 当前位置 -->
+        <div class="categ_crumb_box2 clearfix_2">
+            <div class="categ_crumb_left">
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/${targetSegment2}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name2}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/${targetSegment2}/qiugou/list-1.html`"
+                    class="categ_crumb_left_a"
+                >
+                    求购
+                </NuxtLink>
+                &gt;
+                <span class="categ_crumb_left_text">{{shopData.name}}</span>
+            </div>
+        </div>
+
+        <div class="supply_1_index_qiugou clearfix">
+            <div class="supply_1_index_qiugou_left">
+                <img class="supply_1_img" :src="shopImg" :alt="shopData.name">
+                <div class="supply_1_right_qiugou">
+                    <h4 class="supply_1_h4">求购：{{shopData.name}}</h4>
+                    <div class="supply_1_ul_qiugou clearfix">
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">发布日期</label><span
+                            class="supply_1_li_text ">{{getTimeText(shopData.created_at)}}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">截止日期</label><span
+                            class="supply_1_li_text ">{{getValidityTime(shopData)}}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">浏览次数</label><span
+                            class="supply_1_li_text ">{{ shopData.hits }}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">联 系 人</label><span
+                            class="supply_1_li_text ">{{ shopData.contact}}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">发布地区</label><span
+                            class="supply_1_li_text ">{{ shopData.address }}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">座 机</label><span
+                            class="supply_1_li_text ">{{ shopData.landline }}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">联系电话</label><span
+                            class="supply_1_li_text ">{{ shopData.phone }}</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="supply_1_index_qiugou_right">
+                <div class="shop_3_right clearfix">
+                    <div class="choice_1_box clearfix">
+                        <div class="choice_1_btn_box clearfix">
+                            <div class="choice_1_btn" 
+                                :class="{ choice_1_btn_only: choice_1_num == 1 }"
+                                @mouseover="choice_1_num = 1">
+                                <span class="choice_1_btn_a">供应商品</span>
+                            </div>
+                            <div class="choice_1_btn" 
+                                :class="{ choice_1_btn_only: choice_1_num == 2 }"
+                                @mouseover="choice_1_num = 2">
+                                <span class="choice_1_btn_a">求购商品</span>
+                            </div>
+                        </div>
+                        <div class="choice_1_card_box">
+                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 1">
+                                <div class="shop_li_img_2" v-for="(item,index) in boxData1">
+                                    <nuxtLink 
+                                        :to="getShopPathDetail1(item)"
+                                        class="shop_li_img_2_a"
+                                    >
+                                        <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
+                                        <div class="shop_li_img_2_right clearfix">
+                                            <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
+                                            <div class="shop_li_img_2_text">
+                                                {{item.name}}
+                                            </div>
+                                        </div>
+                                    </nuxtLink>
+                                </div>
+                            </div>
+                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 2">
+                                <div class="shop_li_img_2" v-for="(item,index) in boxData2">
+                                    <nuxtLink 
+                                        :to="getShopPathDetail1(item)"
+                                        class="shop_li_img_2_a"
+                                    >
+                                        <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
+                                        <div class="shop_li_img_2_right clearfix">
+                                            <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
+                                            <div class="shop_li_img_2_text">
+                                                {{item.name}}
+                                            </div>
+                                        </div>
+                                    </nuxtLink>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="supply_2_index clearfix">
+
+            <div class="supply_head_box clearfix_2">
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 1 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 1">详情信息</a>
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 2 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 2">发布人信息</a>
+            </div>
+
+            <div class="supply_art_out clearfix">
+                <!-- 详情信息 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 1" v-html="shopData.detail"></div>
+                <!-- 发布人信息 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 2">
+                    <p class="supply_art_box_p">公司名称：</p>
+                    <p class="supply_art_box_p">电子邮箱：{{shopData.email}}</p>
+                    <p class="supply_art_box_p">邮政编码：{{shopData.postal}}</p>
+                    <p class="supply_art_box_p">联系地址：{{shopData.address}}</p>
+                </div>
+            </div>
+        </div>
+        <ShopHotNews></ShopHotNews>
+    </main>
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup } from 'element-plus'
+//1.2选项卡 
+const supply_choice_1_num = ref(1)
+//1.3是否展示有效期
+const getValidityTime = (shopData) => {
+    if(shopData.islong==1){
+        return "无期限"
+    }else{
+        if(shopData.validity){
+            return shopData.validity.split(' ')[0];
+        }
+    }
+}
+//1.4 格式化字符串时间
+const getTimeText = (time) => {
+    if(time){
+        return time.split(' ')[0];
+    }else{
+        return '';
+    }
+}
+// 1.4应商品与求购商品的选项卡	
+const choice_1_num = ref(1)
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+
+//2.2 获得第一层面包屑地址
+let articleId = 0; //把路径转换为数据id
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+const name = ref('') //当前频道名称
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id;
+    name.value = getRouteId.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.3 获得第二层面包屑地址
+let articleId2 = 0;
+const name2 = ref('');
+const targetSegment2 = getRoutePath(3);
+//通过导航路径反向查询导航id
+const getRouteId2 = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment2,
+    },
+});
+if(getRouteId2.code == 200){
+    articleId2 = getRouteId2.data.category_id;
+    name2.value = getRouteId2.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.4 获得子栏目列表
+const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': articleId,
+            'num': 50,
+        },
+    });
+    if (listData.code == 200) {
+        secondNav.value = listData.data
+    } else {
+        console.log("错误位置：获得子级栏目列表")
+    }
+}
+getSecondNav();
+
+//2.5 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.获得商品详情 start ---------------------------------------->
+const shopId = ref(route.params.id) //获得商品的id
+const shopData = ref({});
+const shopImg = ref("")
+
+let getShopData = async () => {
+    const shopReq = await requestDataPromise('/web/getWebsiteshopInfo', {
+        method: 'GET',
+        query: {
+            'id': parseFloat(shopId.value),
+        },
+    });
+
+    if (shopReq.code == 200) {
+        console.log(667788)
+        console.log(shopReq)
+        shopData.value = shopReq.data
+        shopImg.value = shopReq.data.imgurl[0]
+    } else {
+        console.log("错误位置：获得商品详情")
+    }
+}
+getShopData();
+
+//获得右侧供应与求购的内容
+const boxData1 = ref([]) //供应商品
+const boxData2 = ref([]) //求购商品
+
+//创建请求数据json
+let getJson = [
+    {"level":"5,0,6"},//供应商品
+    {"level":"6,0,6"},//求购商品
+]
+
+let jsonString = JSON.stringify(getJson)
+
+//获取所有数据
+async function getPageAllData() {
+    const mkdata = await requestDataPromise('/web/getWebsiteshop', {
+        method: 'GET',
+        query: {
+            'catid': 346,
+            'id': jsonString,
+        },
+    });
+
+    if (mkdata.code == 200) {
+        //供应商品
+        boxData1.value = mkdata.data.goods[0];
+        //求购商品
+        boxData2.value = mkdata.data.goods[1];
+    } else {
+        ElMessage.error(mkdata.message)
+    }
+}
+getPageAllData();
+//3.获得商品详情 end  ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopdetail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
+<style lang="less" scoped>
+@import '@/assets/css/shop/detail.less';
+</style>

pages/xiangcunshangcheng/[dir]/[dir]/qiugou/list-[id].html.vue

@@ -0,0 +1,393 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <!--子菜单和地区选择-->
+        <ShopSubMenu2></ShopSubMenu2>
+        <!-- 地区选择 -->
+        <div class="categ_crumb_box clearfix_2">
+            <!-- 当前位置 -->
+            <div class="categ_crumb_left">
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/${targetSegment2}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name2}}
+                </NuxtLink>
+                &gt;
+                <span class="categ_crumb_left_text">{{name}}</span>
+            </div>
+            <!-- 当前位置 -->
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_right clearfix" v-if="cityList.length > 0">
+                <div class="categ_crumb_right_text">当前商品所在地：</div>
+                <div class="categ_crumb_right_text hand">{{cityName}}</div>
+                <div class="categ_crumb_right_btn back100 hand" @click="btn_if_categ_crumb_panel_fun" tabindex="1"
+                    @blur="categ_crumb_panel_btn_blur_fun">
+                </div>
+            </div>
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_panel" v-show="if_categ_crumb_panel" tabindex="0"
+                @click="categ_crumb_panel_focus_fun" @blur="categ_crumb_panel_blur_fun">
+                <h4 class="categ_crumb_panel_h4">您可以选择以下详细地区</h4>
+                <div class="categ_crumb_panel_btn_box clearfix">
+                    <span 
+                        class="categ_crumb_panel_btn hand"
+                        :class="{ categ_crumb_panel_btn_only: item.id == chooseCityId }"
+                        v-for="item in cityList"
+                        @click="chooseCity(item.id)"
+                    >
+                        {{ item.name }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        <!-- 您可以选择以下详细分类 -->
+        <!-- <div class="categ_grey_box clearfix" v-if="secondNav.length > 0">
+            <div class="categ_grey_head">您可以选择以下详细分类：</div>
+            <div class="categ_grey_ul clearfix">
+                <span 
+                    :class="['categ_grey_btn hand', { 'categ_grey_btn_only': selectedSecondId == item.category_id }]"
+                    v-for="item in secondNav"
+                    @click="selectSecond(item)"
+                >
+                    {{ item.alias }}
+                </span>
+            </div>
+        </div> -->
+        <!-- 您可以选择以下详细分类 -->
+
+        <!-- 供应信息列表 -->
+        <div class=" clearfix">
+            <div class="categ_1_index clearfix">
+                <div class="categ_head_box clearfix_2">
+                    <a class="categ_head_a" href="" title="">求购信息列表</a>
+                </div>
+                <div class="categ_table clearfix">
+                    <div class="categ_table_head_box">
+                        <div class="categ_table_td_1">产品图片</div>
+                        <div class="categ_table_td_2">供求信息/公司</div>
+                        <div class="categ_table_td_3">发布时间</div>
+                        <div class="categ_table_td_4">地区</div>
+                    </div>
+                    <ShopNoData v-if="pageDataType2.length == 0" :pagetype="'list'"></ShopNoData>
+                    <div class="categ_table_li" v-for="item in pageDataType2">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
+                            <div class="categ_table_td_1">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" :alt="item.name">
+                            </div>
+                            <div class="search_table_td_2 ">
+                                <div class="search_table_td_2_in clearfix">
+                                    <div class="search_table_td_2_head dot1">
+                                        {{ item.name }}
+                                    </div>
+                                    <div class="search_table_td_2_dot2 dot2">
+                                        {{ item.description }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="categ_table_td_3">{{ getTime(item.created_at, 'year', 1) }}</div>
+                            <div class="categ_table_td_4 dot1">{{ item.city_name }}</div>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <!-- 分页器 -->
+            <div class="pagination" v-if="total">
+                <el-pagination 
+                    size="small" 
+                    background layout="prev, pager, next" 
+                    :total="total"
+                    v-model:page-size="pageSize" 
+                    prev-text="上一页" 
+                    next-text="下一页" 
+                    :current-page="pageNum"
+                    @current-change="changePage" 
+                />
+            </div>
+        </div>
+        <ShopHotNews></ShopHotNews>
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage,ElPagination } from 'element-plus'
+
+//分页
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/xiangcunshangcheng/${targetSegment}/${targetSegment2}/gongying/list-${value}.html`)
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+
+//2.2 获得第一层面包屑地址
+let articleId = 0; //把路径转换为数据id
+const name = ref('') //当前频道名称
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id;
+    name.value = getRouteId.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.3 获得第二层面包屑地址
+let articleId2 = 0; //把路径转换为数据id
+const name2 = ref('') 
+const targetSegment2 = getRoutePath(3);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId2 = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment2,
+    },
+});
+if(getRouteId2.code == 200){
+    articleId2 = getRouteId2.data.category_id;
+    name2.value = getRouteId2.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.4 获得子栏目列表
+// const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+// let getSecondNav = async () => {
+//     const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+//         method: 'GET',
+//         query: {
+//             'placeid': 1,
+//             'pid': articleId,
+//             'num': 50,
+//         },
+//     });
+//     if (listData.code == 200) {
+//         secondNav.value = listData.data
+//     } else {
+//         console.log("错误位置：获得子级栏目列表")
+//     }
+// }
+// getSecondNav();
+
+//2.5 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.选择商品所在地 start ---------------------------------------->
+//3.1 弹出下拉框
+const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
+const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
+const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
+    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
+}
+const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
+    setTimeout(() => {
+        if (if_categ_crumb_panel_click.value == true) {
+            //点击在下拉panel内
+        } else {
+            //没点击在下拉panel内
+            if_categ_crumb_panel.value = false
+        }
+    }, 100);
+}
+//3.2 点击下拉panel
+const categ_crumb_panel_focus_fun = () => {
+    if_categ_crumb_panel_click.value = true
+    if_categ_crumb_panel.value = true
+}
+//3.3 下拉panel失去焦点事件
+const categ_crumb_panel_blur_fun = () => {
+    if_categ_crumb_panel_click.value = false
+    if_categ_crumb_panel.value = false
+}
+
+//3.4 获得详细地址列表
+const cityName = ref('')
+const cityList = ref([])
+const chooseCityId = ref('')
+let getCityList = async (id) => {
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    if(shengData.code==200){
+        cityList.value = shengData.data;
+        cityName.value = shengData.data[0].pid_name;
+    }else{
+        ElMessage.error(shengData.message)
+    }
+}
+//3.5 初始化的时候先获取一下城市列表
+if(cityId.value != undefined){
+    getCityList(cityId.value);
+}
+//3.6 选择城市
+const chooseCity = (id) => {
+    chooseCityId.value = id;
+    router.replace({
+        query: { 
+            ...route.query, 
+            select: id
+        }
+    })
+}
+//3.选择商品所在地 end ---------------------------------------->
+
+//4.搜索 start ---------------------------------------->
+//4.1 选择一个子导航
+const selectSecond = (item) => {
+    //高亮显示当前选中的子导航
+    selectedSecondId.value = item.category_id
+    router.replace({
+        query: { ...route.query, catid: item.category_id }
+    })
+}
+
+//4.2 页面展示的数据
+//const pageDataType1 = ref([]);//供应数据
+const pageDataType2 = ref([]);//求购数据 此页面不需要求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:"",//栏目id
+        city_id:"",//城市id
+        keyword:"",//搜索关键词 - 该页不需要
+        page:1,
+        pageSize:10,
+        type_id:2//1:供应 2:求购
+    }
+
+    if(selectedSecondId.value == undefined){
+        params.catid = articleId2
+    }else{
+        params.catid = parseFloat(selectedSecondId.value)
+    }
+
+    let routeCiteId = route.query.select;
+
+    if(routeCiteId != undefined && routeCiteId != ''){
+        params.city_id = parseFloat(routeCiteId)
+    }else{
+        if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+            //删除变量params中的city_id参数
+            delete params.city_id
+        }else{
+            params.city_id = parseFloat(cityId.value)
+        }
+    }
+
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        //pageDataType1.value = pageData.data.type1;
+        pageDataType2.value = pageData.data.type2;
+        total.value = pageData.data.type2_count;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+        getCityList(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.4.2 监听catid
+watch(() => route.query.catid, (newVal, oldVal) => {
+    pageSearch()
+})
+//4.4.3 监听select
+//如果路由中存在select参数就忽略cityid
+watch(() => route.query.select, (newVal, oldVal) => {
+    if(newVal != undefined){
+        pageSearch()
+    }else{
+        chooseCityId.value = '';
+        pageSearch()
+    }
+})
+//4.搜索 end ---------------------------------------->
+
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
+
+
+<style lang="less" scoped>
+@import '@/assets/css/shop/list.less';
+</style>

pages/xiangcunshangcheng/[dir]/gongying/[id].html.vue

@@ -1,53 +1,60 @@
 <template>
     <ShopPageHead></ShopPageHead>
     <main class="index_main" id="all_vue">
-        <!-- 供应商品 xc_shop_supply-->
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
-        <!--子菜单和地区选择-->
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
         <ShopSubMenu></ShopSubMenu>
-
-        
         <!-- 当前位置 -->
         <div class="categ_crumb_box clearfix_2">
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 乡村商城 </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 农副产品 </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/gongying/list-1.html`"
+                    class="categ_crumb_left_a"
+                >
+                    供应
+                </NuxtLink>
                 &gt;
-                <span class="categ_crumb_left_text"> 皮毛畜禽 </span>
+                <span class="categ_crumb_left_text">{{shopData.name}}</span>
             </div>
         </div>
-        <!-- 当前位置 -->
 
         <div class="supply_1_index clearfix">
-            <img class="supply_1_img" src="@/public/img/10.png" title="" alt="">
+            <img class="supply_1_img" :src="shopImg" :alt="shopData.name">
             <div class="supply_1_right">
-                <h4 class="supply_1_h4">红肉蜜柚葡萄柚子整箱包邮10斤当季现摘新鲜水果红肉蜜柚葡萄柚子整箱包邮</h4>
+                <h4 class="supply_1_h4">{{shopData.name}}</h4>
                 <div class="supply_1_title_box clearfix">
-                    <time class="supply_1_title"> 更新日期：2023-04-25 17：47：05</time>
-                    <span class="supply_1_title">浏览次数：10</span>
+                    <time class="supply_1_title"> 更新日期：{{shopData.updated_at}}</time>
+                    <span class="supply_1_title">浏览次数：{{ shopData.hits }}</span>
                 </div>
                 <div class="supply_1_ul clearfix">
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">公 司 名</label><span
-                            class="supply_1_li_text "> 青神天香国色生态青神天香国色生态农业开发有限公司</span></div>
+                            class="supply_1_li_text "></span></div>
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">所 在 地</label><span
-                            class="supply_1_li_text ">175</span></div>
+                            class="supply_1_li_text ">{{ shopData.address }}</span></div>
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">联 系 人</label><span
-                            class="supply_1_li_text ">肖妍杰</span></div>
+                            class="supply_1_li_text ">{{ shopData.contact}}</span></div>
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">产品单价</label><span
-                            class="supply_1_li_text ">74.9元/斤</span></div>
+                            class="supply_1_li_text ">{{shopData.price}}元/{{ shopData.unit }}</span></div>
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">最小定量</label><span
-                            class="supply_1_li_text ">1</span></div>
+                            class="supply_1_li_text ">{{ shopData.min }}</span></div>
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">供货总量</label><span
-                            class="supply_1_li_text ">不详</span></div>
+                            class="supply_1_li_text ">{{shopData.max}}</span></div>
                     <div class="supply_1_li clearfix"><label class="supply_1_li_label">有 效 期</label><span
-                            class="supply_1_li_text ">2018-06-29</span></div>
+                            class="supply_1_li_text ">{{getValidityTime(shopData)}}</span></div>
                 </div>
             </div>
         </div>
@@ -57,1019 +64,144 @@
                 <a class="supply_head_a" title="" :class="{ supply_head_a_only: 1 == supply_choice_1_num }"
                     @mouseover="supply_choice_1_num = 1">详情信息</a>
                 <a class="supply_head_a" title="" :class="{ supply_head_a_only: 2 == supply_choice_1_num }"
-                    @mouseover="supply_choice_1_num = 2">图片展示</a>
+                    @mouseover="supply_choice_1_num = 2">联系方式</a>
                 <a class="supply_head_a" title="" :class="{ supply_head_a_only: 3 == supply_choice_1_num }"
-                    @mouseover="supply_choice_1_num = 3">联系方式</a>
+                    @mouseover="supply_choice_1_num = 3">图片展示</a>
             </div>
 
             <div class="supply_art_out clearfix">
                 <!-- 详情信息 -->
-                <div class="supply_art_box" v-show="supply_choice_1_num == 1">
-                    青神天香国色生态农业开发有限公司坐落于四川省眉山市青神县，我
-                    公司拥有完整科学的生产加工体系，拥有生态用地350余亩，青神天
-                    香国色生态农业开发有限公司致力于农产品的种植与加工，是蓝莓
-                    、李子、柑桔、牡丹花茶、家禽等产品生产养殖基地，总投资超
-                    过1000万元。　　 我公司成立于2015年，获得过眉山市十佳返乡创新企业，青神县创业新星企业，青神县生态农业示范基地，实力雄厚，年产值在500万以上，欢迎各界朋友莅临指导！
-                </div>
-                <!-- 详情信息 -->
-                <!-- 图片展示 -->
-                <div class="supply_art_box" v-show="supply_choice_1_num == 2">2</div>
-                <!-- 图片展示 -->
-                <!-- 联系方式 -->
-                <div class="supply_art_box" v-show="supply_choice_1_num == 3">3</div>
+                <div class="supply_art_box" v-show="supply_choice_1_num == 1" v-html="shopData.detail"></div>
                 <!-- 联系方式 -->
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <div class="categ_3_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">点击排行</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_1">
-                <div class="categ_li_img_1" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_1_a" href="" title="">
-                        <img class="categ_li_img_1_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_1_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
+                <div class="supply_art_box" v-show="supply_choice_1_num == 2">
+                    <p class="supply_art_box_p">公司名：</p>
+                    <p class="supply_art_box_p">联系人：{{shopData.contact}}</p>
+                    <p class="supply_art_box_p">电话：{{shopData.phone}}</p>
+                    <p class="supply_art_box_p">邮箱：{{shopData.email}}</p>
+                    <p class="supply_art_box_p">邮政编码：{{shopData.postal}}</p>
+                    <p class="supply_art_box_p">详细地址：{{shopData.address}}</p>
                 </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-
-        <!-- 最新商机 -->
-        <div class="categ_5_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新商机</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_2">
-                <div class="categ_li_img_2" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_2_a" href="" title="">
-                        <img class="categ_li_img_2_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_2_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
+                <!-- 图片展示 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 3">
+                    <div class="supply_art_box_img">
+                        <img :src="item" v-for="item in shopData.imgurl">
+                    </div>
                 </div>
             </div>
         </div>
-        <!-- 最新商机 -->
+        <ShopHotNews></ShopHotNews>
     </main>
-    <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
 
 <script setup>
+//1.页面必备方法 start ---------------------------------------->
 import { ref, onMounted } from 'vue'
 import { ElRadio, ElRadioGroup } from 'element-plus'
-
-// 选项卡 
+//1.2选项卡 
 const supply_choice_1_num = ref(1)
-
+//1.3是否展示有效期
+const getValidityTime = (shopData) => {
+    if(shopData.islong==1){
+        return "无期限"
+    }else{
+        if(shopData.validity){
+            return shopData.validity.split(' ')[0];
+        }
+    }
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+let articleId = 0; //把路径转换为数据id
+const name = ref('') //当前频道名称
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id;
+    name.value = getRouteId.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.3 获得子栏目列表
+const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': articleId,
+            'num': 50,
+        },
+    });
+    if (listData.code == 200) {
+        secondNav.value = listData.data
+    } else {
+        console.log("错误位置：获得子级栏目列表")
+    }
+}
+getSecondNav();
+
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.获得商品详情 start ---------------------------------------->
+const shopId = ref(route.params.id) //获得商品的id
+const shopData = ref({});
+const shopImg = ref("")
+
+let getShopData = async () => {
+    const shopReq = await requestDataPromise('/web/getWebsiteshopInfo', {
+        method: 'GET',
+        query: {
+            'id': parseFloat(shopId.value),
+        },
+    });
+
+    if (shopReq.code == 200) {
+        console.log(667788)
+        console.log(shopReq)
+        shopData.value = shopReq.data
+        shopImg.value = shopReq.data.imgurl[0]
+    } else {
+        console.log("错误位置：获得商品详情")
+    }
+}
+getShopData();
+//3.获得商品详情 end  ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopdetail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
 </script>
 <style lang="less" scoped>
-@charset "utf-8";
-
-* {
-    margin: 0;
-    padding: 0;
-
-    font-family: "微软雅黑", "microsoft yahei";
-}
-
-ul,
-ol {
-    list-style: none;
-}
-
-a:active {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-a:visited {
-    text-decoration: none;
-}
-
-a:link {
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: none;
-}
-
-body {
-    position: relative;
-}
-
-.clearfix {
-    overflow: hidden;
-}
-
-.clearfix_2::after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.hiddenColor {
-    visibility: hidden;
-}
-
-.hand {
-    cursor: pointer;
-}
-
-.aTag_parent {
-    position: relative;
-}
-
-.aTag_parent>a,
-.aTag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 99;
-    border: 0px;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.dot1 {
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dot2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.dot3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-input,
-img {
-    border: none;
-}
-
-.cover100 img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.back100 {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-article,
-aside,
-footer,
-header,
-time,
-video,
-main,
-nav,
-h4,
-h3,
-section {
-    display: block;
-}
-
-.index_main {
-    margin: 0 auto 30px;
-}
-
-.slow_6 {
-    -webkit-transition: all .6s;
-    -moz-transition: all .6s;
-    -ms-transition: all .6s;
-    -o-transition: all .6s;
-    transition: all .6s;
-}
-
-.index_main {
-    width: 1200px;
-}
-
-.shop_head {
-    margin: 30px auto 0px;
-}
-
-.shop_head_left {
-    float: left;
-    width: 322px;
-    margin-right: 33px;
-
-    .shop_head_left_a {
-        width: 322px;
-        display: block;
-    }
-}
-
-.shop_head_img {
-    width: 322px;
-    display: block;
-}
-
-.shop_head_form_out {
-    width: 550px;
-    float: left;
-
-    .shop_head_form {
-        margin-top: 37px;
-        display: block;
-        width: 547px;
-        border: solid 1px #A01C0E;
-        height: 40px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-
-    .shop_head_btn {
-        float: right;
-        width: 52px;
-        height: 100%;
-        border: solid 1px #fff;
-        box-sizing: border-box;
-        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
-        background-size: 22px 22px;
-    }
-
-    .shop_head_inp {
-        display: block;
-        text-indent: 11px;
-        height: 40px;
-        line-height: 40px;
-        width: 490px;
-    }
-
-    .shop_head_form_foot {
-        width: 550px;
-        margin-top: 10px;
-    }
-
-    .shop_head_form_foot_a {
-        float: left;
-        height: 18px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-right: 10px;
-    }
-
-    .shop_head_form_foot_a:nth-of-type(1) {
-        color: #A01C0E;
-    }
-
-    .shop_head_form_foot_a:hover {
-        color: #A01C0E;
-    }
-}
-
-.shop_head_right {
-    float: right;
-    margin-top: 37px;
-    position: relative;
-
-    .shop_head_right_btn {
-        float: right;
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        color: #666;
-        font-size: 14px;
-        margin-left: 10px;
-        text-indent: 52px;
-        border: 1px solid #E9E9E9;
-        background: no-repeat 20px center #F4F4F4;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1) {
-        background-image: url(@/public/img/4.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2) {
-        background-image: url(@/public/img/5.png);
-    }
-
-    .shop_head_right_btn:hover {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1):hover {
-        background-image: url(@/public/img/4a.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2):hover {
-        background-image: url(@/public/img/5a.png);
-    }
-
-    .shop_head_right_btn_1_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/4a.png) !important;
-    }
-
-    .shop_head_right_btn_2_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/5a.png) !important;
-    }
-
-    .shop_head_right_btn:hover .shop_head_right_out {
-        display: block;
-    }
-}
-
-.shop_head_right_box {
-    background: #fff;
-    height: 1111px;
-    margin-top: 20px;
-}
-
-.shop_alert_out {
-    position: absolute;
-    width: 1036px;
-    right: 0px;
-    top: 99%;
-    z-index: 111;
-}
-
-.shop_alert_box {
-    background: #fff;
-    box-sizing: border-box;
-    padding: 0px 20px;
-    border: solid 1px #A01C0E;
-    width: 100%;
-    margin-top: 20px;
-}
-
-.shop_alert_head_box {}
-
-.shop_alert_head_name_1 {
-    float: left;
-    font-weight: bold;
-    color: #A01C0E;
-    font-size: 20px;
-    margin-top: 30px;
-    letter-spacing: 1px;
-}
-
-.shop_alert_head_name_2 {
-    float: left;
-    color: #333;
-    font-size: 16px;
-    margin: 35px 0px 0px 10px;
-    position: relative;
-    padding-left: 22px;
-    font-weight: bold;
-}
-
-.shop_alert_head_name_2::after {
-    content: '';
-    display: block;
-    width: 14px;
-    height: 10px;
-    position: absolute;
-    left: 0px;
-    bottom: 3px;
-    background: url(@/public/img/16.png) no-repeat left 0px;
-    background-size: 100% 100%;
-}
-
-.shop_alert_head_btn_a {
-    float: right;
-    height: 40px;
-    line-height: 40px;
-    color: #fff;
-    font-size: 14px;
-    padding: 0px 20px 0px 36px;
-    margin-top: 23px;
-    background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
-    background-size: 14px auto;
-}
-
-.shop_alert_ul {
-    margin: 28px auto 0px;
-    width: 980px;
-}
-
-.shop_alert_li {
-    margin-bottom: 11px;
-    display: flex;
-
-    .shop_alert_li_label {
-        width: 150px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 24px;
-        font-weight: bold;
-        position: relative;
-        box-sizing: border-box;
-        margin-right: 20px;
-    }
-
-    .shop_alert_li_label::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 22px;
-        height: 22px;
-        background: url(@/public/img/15.png) no-repeat right 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_li_panel {}
-
-    .shop_alert_li_panel_a {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        margin: 0px 25px 10px 0px;
-    }
-}
-
-.shop_alert_li_panel_a:hover {
-    color: #A01C0E;
-}
-
-.shop_alert_1_index {
-    margin-top: 20px;
-}
-
-.shop_alert_img_ul {
-    margin-top: 30px;
-}
-
-.shop_alert_img_li {
-    float: left;
-    width: 314px;
-    margin: 0px 26px 30px 0px;
-    box-sizing: border-box;
-
-    .shop_alert_img_li_a {
-        display: block;
-        width: 100%;
-    }
-
-    .shop_alert_img_li_img {
-        width: 130px;
-        height: 130px;
-        margin-right: 10px;
-        float: left;
-    }
-
-    .shop_alert_img_li_right {
-        width: 173px;
-        float: right;
-    }
-
-    .shop_alert_img_li_h4 {
-        height: 18px;
-        line-height: 18px;
-        color: #333;
-        font-size: 14px;
-        font-weight: bold;
-        margin-top: 7px;
-    }
-
-    .shop_alert_img_li_dot3 {
-        height: 48px;
-        line-height: 16px;
-        color: #666;
-        font-size: 12px;
-        margin-top: 13px;
-    }
-
-    .shop_alert_img_li_time {
-        float: left;
-        height: 26px;
-        line-height: 26px;
-        color: rgba(51, 51, 51, 0.4);
-        font-size: 12px;
-        margin-top: 18px;
-        background: #f7f7f7;
-        padding: 0px 4px;
-    }
-}
-
-.shop_alert_img_li:nth-of-type(3n) {
-    margin-right: 0;
-}
-
-.shop_alert_img_li_a:hover * {
-    color: #A01C0E;
-}
-
-.shop_banner {
-    width: 1200px;
-    margin: 20px auto 0px;
-}
-
-.shop_banner_a {
-    display: block;
-    width: 1200px;
-    height: 90px;
-    overflow: hidden;
-}
-
-.shop_banner_img {
-    display: block;
-    width: 1200px;
-}
-
-.shop_nav {
-    border: solid 1px #E9E9E9;
-    background: #fafafa;
-    margin-top: 20px;
-}
-
-.shop_nav_head {
-    float: left;
-    height: 28px;
-    width: 138px;
-    margin: 30px 52px 0px 25px;
-}
-
-.shop_nav_head_a {
-    display: block;
-    height: 28px;
-    width: 138px;
-    background: url(@/public/img/7.png) no-repeat left top;
-    background-size: 100% 100%;
-}
-
-.shop_nav_in {
-    float: left;
-}
-
-.shop_nav_in_a {
-    float: left;
-    height: 75px;
-    line-height: 75px;
-    color: #333;
-    font-size: 16px;
-    background: #f8f5f5;
-    width: 118px;
-    border-bottom: solid 5px #A01C0E;
-    font-weight: bold;
-    margin: 5px 0;
-    text-align: center;
-}
-
-.shop_nav_in_a:nth-of-type(4) {
-    margin-right: 8px;
-}
-
-.shop_nav_in_a:hover {
-    color: #A01C0E;
-}
-
-.shop_name_in {
-    float: left;
-    height: 40px;
-    width: 1046px;
-    float: left;
-    box-sizing: border-box;
-}
-
-.shop_name_a {
-    float: left;
-    height: 27px;
-    line-height: 27px;
-    color: #222;
-    font-size: 20px;
-    position: relative;
-    margin: 7px 14.5px 0;
-    padding: 0px 10px;
-}
-
-.shop_name_a::after {
-    content: '/';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: -18px;
-    height: 100%;
-    line-height: 27px;
-    color: #E9E9E9;
-    font-size: 20px;
-}
-
-.shop_name_a:nth-last-of-type(1)::after {
-    content: '';
-    display: none;
-}
-
-.shop_name_a_only {
-    background: #A01C0E;
-    color: #fff;
-}
-
-.shop_name_out {
-    margin-top: 20px;
-}
-
-.shop_name_box {
-    border-top: solid 1px #fff;
-
-    .shop_name_box_a {
-        height: 44px;
-        line-height: 44px;
-        color: #fff;
-        font-weight: bold;
-        font-size: 20px;
-    }
-}
-
-.shop_name {
-    float: left;
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    position: relative;
-    z-index: 11;
-    text-align: center;
-    font-size: 20px;
-    background: #A01C0E;
-    padding: 0px 14px;
-}
-
-.shop_name_right {
-    height: 40px;
-    border-bottom: 1px solid #E8E9EC;
-    margin-top: 4px;
-    background: #F8F8F8;
-    position: relative;
-    z-index: 2;
-}
-
-.shop_name_right::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    width: 16px;
-    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
-    background-size: 100% auto;
-}
-
-.shop_name_btn {
-    width: 24px;
-    height: 24px;
-    float: right;
-    margin: 10px 22px 0px 0px;
-    background: url(@/public/img/8.png) no-repeat center center;
-    border-radius: 50%;
-    background-size: 100% 100%;
-}
-
-.shop_2_left {
-    float: left;
-    width: 900px;
-}
-
-.shop_3_right {
-    float: right;
-    width: 280px;
-}
-
-.shop_1_box {
-    margin: 30px auto 0px;
-}
-
-.shop_2_box {
-    margin: 30px auto 0px;
-}
-
-.shop_3_box {
-    margin: 0px auto 0px;
-}
-
-.shop_4_box {
-    margin: 4px auto 0px;
-}
-
-.shop_5_box {
-    margin: 4px auto 0px;
-}
-
-.categ_crumb_box {
-    margin-top: 20px;
-    border-bottom: solid 1px #D9D9D9;
-    padding-bottom: 20px;
-    position: relative;
-}
-
-.categ_crumb_left {
-    float: left;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-}
-
-.categ_crumb_left_a {
-    display: inline-block;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-}
-
-.categ_crumb_left_text {
-    display: inline-block;
-    height: 21px;
-    line-height: 21px;
-    color: #333;
-    font-size: 16px;
-}
-
-.categ_3_index {
-    margin-top: 28px;
-}
-
-.categ_ul_img_1 {
-    margin-top: 20px;
-    overflow: hidden;
-}
-
-.categ_li_img_1 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-
-    .categ_li_img_1_a {}
-
-    .categ_li_img_1_img {
-        display: block;
-        width: 180px;
-        height: 180px;
-    }
-
-    .categ_li_img_1_dot2 {
-        width: 168px;
-        margin: 10px auto 0px;
-        height: 32px;
-        line-height: 16px;
-        color: #333;
-        font-size: 14px;
-    }
-}
-
-.categ_li_img_1:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_1_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_1:hover .categ_li_img_1_dot2 {
-    color: #A01C0E;
-}
-
-.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/18.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/19.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/20.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_ul_img_2 {
-    margin-top: 20px;
-    overflow: hidden;
-}
-
-.categ_li_img_2 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-
-    .categ_li_img_2_a {}
-
-    .categ_li_img_2_img {
-        display: block;
-        width: 180px;
-        height: 180px;
-    }
-
-    .categ_li_img_2_dot2 {
-        width: 168px;
-        margin: 10px auto 0px;
-        height: 32px;
-        line-height: 16px;
-        color: #333;
-        font-size: 14px;
-    }
-
-    .categ_li_img_2:nth-of-type(6n) {
-        margin-right: 0px;
-    }
-}
-
-.categ_li_img_2_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_2:hover .categ_li_img_2_dot2 {
-    color: #A01C0E;
-}
-
-/* 供应商品 */
-.supply_1_index {
-    margin-top: 30px;
-}
-
-.supply_1_img {
-    float: left;
-    width: 330px;
-    height: 330px;
-}
-
-.supply_1_right {
-    float: right;
-    width: 845px;
-}
-
-.supply_1_h4 {
-    line-height: 29px;
-    color: #333;
-    font-size: 22px;
-}
-
-.supply_1_title_box {}
-
-.supply_1_title {
-    float: left;
-    height: 31px;
-    line-height: 31px;
-    color: #999;
-    font-size: 16px;
-    padding: 0px 10px;
-    margin: 14px 20px 0px 0px;
-    background: #F8F8F8;
-}
-
-.supply_1_ul {
-    margin-top: 10px;
-}
-
-.supply_1_li {
-    display: flex;
-    margin-bottom: 16px;
-
-    .supply_1_li_label {
-        line-height: 21px;
-        color: #999;
-        font-size: 16px;
-        min-width: 64px;
-        margin-right: 15px;
-    }
-
-    .supply_1_li_text {
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-}
-
-.supply_head_box {
-    border-bottom: solid 1px #E9E9E9;
-    padding-bottom: 22px;
-    margin-top: 20px;
-    border-top: solid 1px rgba(0, 0, 0, 0);
-
-    .supply_head_a {
-        float: left;
-        font-size: 20px;
-        color: #999;
-        height: 18px;
-        line-height: 18px;
-        margin-right: 40px;
-    }
-
-    .supply_head_a:nth-of-type(1) {
-        border-left: solid 3px #A01C0E;
-        text-indent: 15px;
-    }
-}
-
-.supply_head_a_only {
-    color: #333;
-}
-
-.supply_art_out {
-    margin-top: 20px;
-}
-
-.supply_art_out>* {
-    color: #333;
-    line-height: 25px;
-    font-size: 20px;
-}
-
-.supply_art_box {}
-
-@media screen and (min-width:1200px) {
-    /*pc_1440*/
-    @media screen and (max-width:1440px) {
-        /*1200*/
-    }
-
-    .pc_none {
-        display: none;
-    }
-}
-
-@media screen and (max-width:599px) {}
-
-@media screen and (max-width:320px) {}
+@import '@/assets/css/shop/detail.less';
 </style>

pages/xiangcunshangcheng/[dir]/gongying/list-[id].html.vue

@@ -2,31 +2,35 @@
     <ShopPageHead></ShopPageHead>
     <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
     <main class="index_main" id="all_vue">
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
         <!--子菜单和地区选择-->
-        <ShopSubMenu></ShopSubMenu>
-
+        <ShopSubMenu2></ShopSubMenu2>
         <!-- 地区选择 -->
         <div class="categ_crumb_box clearfix_2">
             <!-- 当前位置 -->
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 乡村商城 </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 农副产品 </a>
-                &gt;
-                <span class="categ_crumb_left_text"> 皮毛畜禽 </span>
+                <span class="categ_crumb_left_text">供应</span>
             </div>
             <!-- 当前位置 -->
             <!-- 当前商品所在地 -->
-            <div class="categ_crumb_right clearfix">
+            <div class="categ_crumb_right clearfix" v-if="cityList.length > 0">
                 <div class="categ_crumb_right_text">当前商品所在地：</div>
-                <div class="categ_crumb_right_text hand">天津</div>
+                <div class="categ_crumb_right_text hand">{{cityName}}</div>
                 <div class="categ_crumb_right_btn back100 hand" @click="btn_if_categ_crumb_panel_fun" tabindex="1"
                     @blur="categ_crumb_panel_btn_blur_fun">
                 </div>
@@ -36,32 +40,33 @@
                 @click="categ_crumb_panel_focus_fun" @blur="categ_crumb_panel_blur_fun">
                 <h4 class="categ_crumb_panel_h4">您可以选择以下详细地区</h4>
                 <div class="categ_crumb_panel_btn_box clearfix">
-                    <span class="categ_crumb_panel_btn hand"
-                        :class="{ categ_crumb_panel_btn_only: per_index == if_categ_crumb_panel_btn_num }"
-                        v-for="(per_obj, per_index) in 11" :key="per_obj"
-                        @click="if_categ_crumb_panel_btn_num = per_index">
-                        <!-- {{per_index+1}} -->
-                        长安区
+                    <span 
+                        class="categ_crumb_panel_btn hand"
+                        :class="{ categ_crumb_panel_btn_only: item.id == chooseCityId }"
+                        v-for="item in cityList"
+                        @click="chooseCity(item.id)"
+                    >
+                        {{ item.name }}
                     </span>
                 </div>
             </div>
         </div>
         <!-- 您可以选择以下详细地区 -->
-        <div class="categ_grey_box clearfix">
+        <div class="categ_grey_box clearfix" v-if="secondNav.length > 0">
             <div class="categ_grey_head">您可以选择以下详细分类：</div>
             <div class="categ_grey_ul clearfix">
-                <!-- <span class="categ_grey_btn hand" :class="{ categ_grey_btn_only: per_index + 1 == choice_categ_num }"
-                              v-for="(per_obj, per_index) in 3" :key="per_obj" @click="choice_categ_num = per_index + 1">
-                              {{ per_index + 1 }}粮油茶糖
-                        </span> -->
-                <span class="categ_grey_btn hand">粮油茶糖</span>
-                <span class="categ_grey_btn hand categ_grey_btn_only">粮油茶糖</span>
-                <span class="categ_grey_btn hand">粮油茶糖</span>
+                <span 
+                    :class="['categ_grey_btn hand', { 'categ_grey_btn_only': selectedSecondId == item.category_id }]"
+                    v-for="item in secondNav"
+                    @click="selectSecond(item)"
+                >
+                    {{ item.alias }}
+                </span>
             </div>
         </div>
         <!-- 您可以选择以下详细地区 -->
+
         <!-- 供应信息列表 -->
-        <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
         <div class=" clearfix">
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
@@ -74,132 +79,31 @@
                         <div class="categ_table_td_3">发布时间</div>
                         <div class="categ_table_td_4">地区</div>
                     </div>
-                    <div class="categ_table_li">
-                        <NuxtLink class="categ_table_li_a" to="/xiangcunshangcheng/nongfuchanpin/gongying/1.html" title="">
+                    <div class="categ_table_li" v-for="item in pageDataType1">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
                             <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" :alt="item.name">
                             </div>
                             <div class="search_table_td_2 ">
                                 <div class="search_table_td_2_in clearfix">
                                     <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.name }}
                                     </div>
                                     <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.description }}
                                     </div>
                                 </div>
                             </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
+                            <div class="categ_table_td_3">{{ getTime(item.created_at, 'year', 1) }}</div>
+                            <div class="categ_table_td_4 dot1">{{ item.city_name }}</div>
                         </NuxtLink>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
                 </div>
             </div>
-
             <!-- 分页器 -->
             <div class="pagination" v-if="total">
                 <el-pagination 
@@ -214,1254 +118,248 @@
                 />
             </div>
         </div>
-        <!-- 点击排行 -->
-        <div class="categ_3_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">点击排行</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_1">
-                <div class="categ_li_img_1" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_1_a" href="" title="">
-                        <img class="categ_li_img_1_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_1_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <!-- 最新商机 -->
-        <div class="categ_5_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新商机</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_2">
-                <div class="categ_li_img_2" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_2_a" href="" title="">
-                        <img class="categ_li_img_2_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_2_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-
-        
+        <ShopHotNews></ShopHotNews>
     </main>
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-<script setup>
-import { ref, onMounted } from 'vue'
-import { ElRadio, ElRadioGroup, ElPagination } from 'element-plus'
 
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage,ElPagination } from 'element-plus'
 
 //分页
-let total = ref(50);
-
-
-const radio1 = ref('1')
-// vue选项卡	
-const choice_1_num = ref(1)
-//我要卖
-const alert_1_num = ref(0)
-// 地区选择
-const shop_name_num = ref(1)
-const shop_name_parent = ref(null)
-const shop_name_leng = ref(1)
-//您可以选择以下详细分类：
-const choice_categ_num = ref(1)
-// 您可以选择以下详细地区=btn
-const if_categ_crumb_panel_btn_num = ref(0)
-const if_categ_crumb_panel = ref(false)// 当前商品所在地下拉板
-const if_categ_crumb_panel_click = ref(false)// //判断是否点击在下拉板内
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/xiangcunshangcheng/${targetSegment}/gongying/list-${value}.html`)
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+let articleId = 0; //把路径转换为数据id
+const name = ref('') //当前频道名称
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id;
+    name.value = getRouteId.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+//2.3 获得子栏目列表
+const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': articleId,
+            'num': 50,
+        },
+    });
+    if (listData.code == 200) {
+        secondNav.value = listData.data
+    } else {
+        console.log("错误位置：获得子级栏目列表")
+    }
+}
+getSecondNav();
+
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.选择商品所在地 start ---------------------------------------->
+//3.1 弹出下拉框
+const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
+const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
 const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
     if_categ_crumb_panel.value = !if_categ_crumb_panel.value
 }
-const categ_crumb_panel_btn_blur_fun = () => {// btn失去焦点事件
-    setTimeout(() => {//的延迟器
-        if (if_categ_crumb_panel_click.value == true) {//判断鼠标是否点击下拉panel
+const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
+    setTimeout(() => {
+        if (if_categ_crumb_panel_click.value == true) {
             //点击在下拉panel内
-        } else {//没点击在下拉panel内
+        } else {
+            //没点击在下拉panel内
             if_categ_crumb_panel.value = false
         }
-    }, 666);
+    }, 100);
 }
-const categ_crumb_panel_focus_fun = () => {//点击下拉panel
+//3.2 点击下拉panel
+const categ_crumb_panel_focus_fun = () => {
     if_categ_crumb_panel_click.value = true
     if_categ_crumb_panel.value = true
 }
-const categ_crumb_panel_blur_fun = () => {// 下拉panel失去焦点事件
+//3.3 下拉panel失去焦点事件
+const categ_crumb_panel_blur_fun = () => {
     if_categ_crumb_panel_click.value = false
     if_categ_crumb_panel.value = false
 }
 
-</script>
-
-
-
-<style lang="less" scoped>
-@charset "utf-8";
-
-* {
-    margin: 0;
-    padding: 0;
-    font-family: "微软雅黑", "microsoft yahei";
-}
-
-ul,
-ol {
-    list-style: none;
-}
-
-a:active {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-a:visited {
-    text-decoration: none;
-}
-
-a:link {
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: none;
-}
-
-body {
-    position: relative;
-}
-
-.clearfix {
-    overflow: hidden;
-}
-
-.clearfix_2::after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.hiddenColor {
-    visibility: hidden;
-}
-
-.hand {
-    cursor: pointer;
-}
-
-.aTag_parent {
-    position: relative;
-}
-
-.aTag_parent>a,
-.aTag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 99;
-    border: 0px;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.dot1 {
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dot2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.dot3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-input,
-img {
-    border: none;
-}
-
-.cover100 img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.back100 {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-article,
-aside,
-footer,
-header,
-time,
-video,
-main,
-nav,
-h4,
-h3,
-section {
-    display: block;
-}
-
-.index_main {
-    margin: 0 auto 30px;
-}
-
-.slow_6 {
-    -webkit-transition: all .6s;
-    -moz-transition: all .6s;
-    -ms-transition: all .6s;
-    -o-transition: all .6s;
-    transition: all .6s;
-}
-
-.index_main {
-    width: 1200px;
-}
-
-.shop_head {
-    margin: 30px auto 0px;
-
-    .shop_head_left {
-        float: left;
-        width: 322px;
-        margin-right: 33px;
-    }
-
-    .shop_head_left_a {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_img {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_form_out {
-        width: 550px;
-        float: left;
-    }
-
-    .shop_head_form {
-        margin-top: 37px;
-        display: block;
-        width: 547px;
-        border: solid 1px #A01C0E;
-        height: 40px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-
-    .shop_head_btn {
-        float: right;
-        width: 52px;
-        height: 100%;
-        border: solid 1px #fff;
-        box-sizing: border-box;
-        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
-        background-size: 22px 22px;
-    }
-
-    .shop_head_inp {
-        display: block;
-        text-indent: 11px;
-        height: 40px;
-        line-height: 40px;
-        width: 490px;
-    }
-
-    .shop_head_form_foot {
-        width: 550px;
-        margin-top: 10px;
-    }
-
-    .shop_head_form_foot_a {
-        float: left;
-        height: 18px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-right: 10px;
-    }
-
-    .shop_head_form_foot_a:nth-of-type(1) {
-        color: #A01C0E;
-    }
-
-    .shop_head_form_foot_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_head_right {
-        float: right;
-        margin-top: 37px;
-        position: relative;
-    }
-
-    .shop_head_right_btn {
-        float: right;
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        color: #666;
-        font-size: 14px;
-        margin-left: 10px;
-        text-indent: 52px;
-        border: 1px solid #E9E9E9;
-        background: no-repeat 20px center #F4F4F4;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1) {
-        background-image: url(@/public/img/4.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2) {
-        background-image: url(@/public/img/5.png);
-    }
-
-    .shop_head_right_btn:hover {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1):hover {
-        background-image: url(@/public/img/4a.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2):hover {
-        background-image: url(@/public/img/5a.png);
-    }
-
-    .shop_head_right_btn_1_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/4a.png) !important;
-    }
-
-    .shop_head_right_btn_2_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/5a.png) !important;
-    }
-
-    .shop_head_right_btn:hover .shop_head_right_out {
-        display: block;
-    }
-
-    .shop_head_right_box {
-        background: #fff;
-        height: 1111px;
-        margin-top: 20px;
-    }
-
-    .shop_alert_out {
-        position: absolute;
-        width: 1036px;
-        right: 0px;
-        top: 99%;
-        z-index: 111;
-    }
-
-    .shop_alert_box {
-        background: #fff;
-        box-sizing: border-box;
-        padding: 0px 20px;
-        border: solid 1px #A01C0E;
-        width: 100%;
-        margin-top: 20px;
-    }
-
-    .shop_alert_head_box {}
-
-    .shop_alert_head_name_1 {
-        float: left;
-        font-weight: bold;
-        color: #A01C0E;
-        font-size: 20px;
-        margin-top: 30px;
-        letter-spacing: 1px;
-    }
-
-    .shop_alert_head_name_2 {
-        float: left;
-        color: #333;
-        font-size: 16px;
-        margin: 35px 0px 0px 10px;
-        position: relative;
-        padding-left: 22px;
-        font-weight: bold;
-    }
-
-    .shop_alert_head_name_2::after {
-        content: '';
-        display: block;
-        width: 14px;
-        height: 10px;
-        position: absolute;
-        left: 0px;
-        bottom: 3px;
-        background: url(@/public/img/16.png) no-repeat left 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_head_btn_a {
-        float: right;
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        font-size: 14px;
-        padding: 0px 20px 0px 36px;
-        margin-top: 23px;
-        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
-        background-size: 14px auto;
-    }
-
-    .shop_alert_ul {
-        margin: 28px auto 0px;
-        width: 980px;
-    }
-
-    .shop_alert_li {
-        margin-bottom: 11px;
-        display: flex;
-    }
-
-    .shop_alert_li_label {
-        width: 150px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 24px;
-        font-weight: bold;
-        position: relative;
-        box-sizing: border-box;
-        margin-right: 20px;
-    }
-
-    .shop_alert_li_label::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 22px;
-        height: 22px;
-        background: url(@/public/img/15.png) no-repeat right 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_li_panel {}
-
-    .shop_alert_li_panel_a {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        margin: 0px 25px 10px 0px;
-    }
-
-    .shop_alert_li_panel_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_alert_1_index {
-        margin-top: 20px;
-    }
-
-    .shop_alert_img_ul {
-        margin-top: 30px;
-    }
-
-    .shop_alert_img_li {
-        float: left;
-        width: 314px;
-        margin: 0px 26px 30px 0px;
-        box-sizing: border-box;
-    }
-
-    .shop_alert_img_li_a {
-        display: block;
-        width: 100%;
-    }
-
-    .shop_alert_img_li_img {
-        width: 130px;
-        height: 130px;
-        margin-right: 10px;
-        float: left;
-    }
-
-    .shop_alert_img_li_right {
-        width: 173px;
-        float: right;
-    }
-
-    .shop_alert_img_li_h4 {
-        height: 18px;
-        line-height: 18px;
-        color: #333;
-        font-size: 14px;
-        font-weight: bold;
-        margin-top: 7px;
-    }
-
-    .shop_alert_img_li_dot3 {
-        height: 48px;
-        line-height: 16px;
-        color: #666;
-        font-size: 12px;
-        margin-top: 13px;
-    }
-
-    .shop_alert_img_li_time {
-        float: left;
-        height: 26px;
-        line-height: 26px;
-        color: rgba(51, 51, 51, 0.4);
-        font-size: 12px;
-        margin-top: 18px;
-        background: #f7f7f7;
-        padding: 0px 4px;
-    }
-
-    .shop_alert_img_li:nth-of-type(3n) {
-        margin-right: 0;
-    }
-
-    .shop_alert_img_li_a:hover * {
-        color: #A01C0E;
-    }
-}
-
-.shop_banner {
-    width: 1200px;
-    overflow: hidden;
-    margin: 20px auto 0px;
-
-    .shop_banner_a {
-        display: block;
-        width: 1200px;
-        height: 90px;
-    }
-
-    .shop_banner_img {
-        display: block;
-        width: 1200px;
-    }
-}
-
-.shop_nav {
-    border: solid 1px #E9E9E9;
-    background: #fafafa;
-    margin-top: 20px;
-}
-
-.shop_nav_head {
-    float: left;
-    height: 28px;
-    width: 138px;
-    margin: 30px 52px 0px 25px;
-
-    .shop_nav_head_a {
-        display: block;
-        height: 28px;
-        width: 138px;
-        background: url(@/public/img/7.png) no-repeat left top;
-        background-size: 100% 100%;
-    }
-}
-
-.shop_nav_in {
-    float: left;
-
-    .shop_nav_in_a {
-        float: left;
-        height: 75px;
-        line-height: 75px;
-        color: #333;
-        font-size: 16px;
-        background: #f8f5f5;
-        width: 118px;
-        border-bottom: solid 5px #A01C0E;
-        font-weight: bold;
-        margin: 5px 0;
-        text-align: center;
-    }
-
-    .shop_nav_in_a:nth-of-type(4) {
-        margin-right: 8px;
-    }
-
-    .shop_nav_in_a:hover {
-        color: #A01C0E;
-    }
-}
-
-.shop_name_in {
-    float: left;
-    height: 40px;
-    width: 1046px;
-    float: left;
-    box-sizing: border-box;
-
-    .shop_name_a {
-        float: left;
-        height: 27px;
-        line-height: 27px;
-        color: #222;
-        font-size: 20px;
-        position: relative;
-        margin: 7px 14.5px 0;
-        padding: 0px 10px;
-    }
-
-    .shop_name_a::after {
-        content: '/';
-        display: block;
-        position: absolute;
-        top: 0px;
-        right: -18px;
-        height: 100%;
-        line-height: 27px;
-        color: #E9E9E9;
-        font-size: 20px;
-    }
-
-    .shop_name_a:nth-last-of-type(1)::after {
-        content: '';
-        display: none;
-    }
-
-    .shop_name_a_only {
-        background: #A01C0E;
-        color: #fff;
-    }
-}
-
-.shop_name_out {
-    margin-top: 20px;
-}
-
-.shop_name_box {
-    border-top: solid 1px #fff;
-}
-
-.shop_name_box_a {
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.shop_name {
-    float: left;
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    position: relative;
-    z-index: 11;
-    text-align: center;
-    font-size: 20px;
-    background: #A01C0E;
-    padding: 0px 14px;
-}
-
-.shop_name_right {
-    height: 40px;
-    border-bottom: 1px solid #E8E9EC;
-    margin-top: 4px;
-    background: #F8F8F8;
-    position: relative;
-    z-index: 2;
-}
-
-.shop_name_right::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    width: 16px;
-    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
-    background-size: 100% auto;
-}
-
-.shop_name_btn {
-    width: 24px;
-    height: 24px;
-    float: right;
-    margin: 10px 22px 0px 0px;
-    background: url(@/public/img/8.png) no-repeat center center;
-    border-radius: 50%;
-    background-size: 100% 100%;
-}
-
-.shop_2_left {
-    float: left;
-    width: 900px;
-}
-
-.shop_3_right {
-    float: right;
-    width: 280px;
-}
-
-.shop_1_box {
-    margin: 30px auto 0px;
-}
-
-.shop_2_box {
-    margin: 30px auto 0px;
-}
-
-.shop_3_box {
-    margin: 0px auto 0px;
-}
-
-.shop_4_box {
-    margin: 4px auto 0px;
-}
-
-.shop_5_box {
-    margin: 4px auto 0px;
-}
-
-.categ_crumb_box {
-    margin-top: 20px;
-    border-bottom: solid 1px #D9D9D9;
-    padding-bottom: 20px;
-    position: relative;
-}
-
-.categ_crumb_left {
-    float: left;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-
-    .categ_crumb_left_a {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #999;
-        font-size: 16px;
-    }
-
-    .categ_crumb_left_text {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-}
-
-.categ_crumb_right {
-    float: right;
-
-    .categ_crumb_right_text {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-
-    .categ_crumb_right_btn {
-        float: left;
-        width: 14px;
-        height: 14px;
-        background-image: url(@/public/img/17.png);
-        margin: 5px 0px 0px 5px;
-    }
-}
-
-.categ_crumb_panel {
-    position: absolute;
-    border: solid 1px #A01C0E;
-    padding: 0px 30px 10px;
-    background: #fff;
-    right: 0px;
-    top: 0px;
-    box-sizing: border-box;
-    width: 658px;
-    top: 100%;
-
-    .categ_crumb_panel_h4 {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 31px;
-        margin-top: 20px;
-        background: url(@/public/img/15.png) no-repeat right center;
-        background-size: 21px 21px;
-    }
-
-    .categ_crumb_panel_btn_box {
-        margin-top: 20px;
-    }
-
-    .categ_crumb_panel_btn {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        font-weight: bold;
-        margin: 0px 26.5px 11px 0px;
-    }
-
-    .categ_crumb_panel_btn:hover {
-        color: #A01C0E;
-    }
-
-    .categ_crumb_panel_btn_only {
-        color: #A01C0E;
-    }
-}
-
-.categ_grey_box {
-    box-sizing: border-box;
-    border: solid 1px #E9E9E9;
-    background: #F8F8F8;
-    padding: 0px 20px 8px;
-    width: 100%;
-    margin-top: 15px;
-
-    .categ_grey_head {
-        height: 48px;
-        line-height: 50px;
-        color: #000;
-        font-size: 18px;
-        border-bottom: dashed 1px #E9E9E9;
-    }
-
-    .categ_grey_ul {
-        margin: 10px 0px 0px -10px;
-    }
-
-    .categ_grey_btn {
-        float: left;
-        line-height: 29px;
-        height: 29px;
-        color: #333;
-        font-size: 16px;
-        margin: 0px 10px 7px;
-    }
-
-    .categ_grey_btn_only {
-        background: #A01C0E;
-        color: #fff;
-        padding: 0px 5px 0px;
-        margin: 0px 5px 7px;
-    }
-}
-
-.categ_head_box {
-    border-bottom: solid 1px #E9E9E9;
-    padding-bottom: 22px;
-    margin-top: 20px;
-    border-top: solid 1px rgba(0, 0, 0, 0);
-
-    .categ_head_a {
-        float: left;
-        text-indent: 15px;
-        font-size: 20px;
-        color: #333;
-        border-left: solid 3px #A01C0E;
-        height: 18px;
-        line-height: 18px;
-    }
-
-    .categ_head_a_more {
-        float: right;
-        color: #999;
-        font-size: 14px;
-        margin-top: 0px;
-    }
-}
-
-.categ_table {}
-
-.categ_table_head_box {
-    height: 61px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_head_box>.categ_table_td_1 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_2 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_3 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_4 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_td_1 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 155px;
-    margin-right: 126px;
-}
-
-.categ_table_td_2 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 480px;
-    margin-right: 124px;
-}
-
-.categ_table_td_3 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 120px;
-    margin-right: 62px;
-}
-
-.categ_table_td_4 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 133px;
-}
-
-/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
-.categ_table_li {
-    height: 161px;
-    box-sizing: border-box;
-    padding: 15px 0px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_td_1_img {
-    display: block;
-    width: 130px;
-    height: 130px;
-    margin: 0px auto;
-}
-
-.categ_table_li .categ_table_td_1 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_2 {
-    line-height: 160px;
-    line-height: 160px;
-    font-weight: bold;
-    color: #333;
-}
-
-.categ_table_li .categ_table_td_3 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_4 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_3_index {
-    margin-top: 28px;
-}
-
-.categ_ul_img_1 {
-    margin-top: 20px;
-}
-
-.categ_li_img_1 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_1_a {}
-
-.categ_li_img_1_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_1_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_1:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_1_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_1:hover .categ_li_img_1_dot2 {
-    color: #A01C0E;
-}
-
-.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/18.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/19.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/20.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_ul_img_2 {
-    margin-top: 20px;
-}
-
-.categ_li_img_2 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_2_a {}
-
-.categ_li_img_2_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_2_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_2:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_2_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_2:hover .categ_li_img_2_dot2 {
-    color: #A01C0E;
-}
-
-/*乡村网-商城-搜索-查看更多*/
-.search_head_text_box {
-    height: 18px;
-    line-height: 18px;
-    color: #333;
-    font-size: 16px;
-    float: left;
-    margin-left: 20px;
-}
-
-.search_head_text_red {
-    color: #A01C0E;
-}
-
-.search_table_td_2 {
-    float: left;
-    height: 100%;
-    width: 480px;
-    margin-right: 124px;
-
-    .search_table_td_2_head {
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        font-weight: bold;
-        width: 480px;
-    }
-
-    .search_table_td_2_dot2 {
-        max-height: 36px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-top: 5px;
-        width: 480px;
-    }
-
-    .search_table_td_2_in {
-        height: 129px;
-        width: 480px;
-        display: table-cell;
-        vertical-align: middle;
-    }
-}
-
-@media screen and (min-width:1200px) {
-    /*pc_1440*/
-    @media screen and (max-width:1440px) {
-        /*1200*/
-    }
-
-    .pc_none {
-        display: none;
-    }
-}
-
-@media screen and (max-width:599px) {}
-
-@media screen and (max-width:320px) {}
-
-
-
-.pagination {
-    margin: 40px auto 30px auto;
-    height: 34px;
-    margin-left: 141px;
-    display: flex;
-    justify-content: center;
-
-    // 鼠标移入后字体颜色
-    .el-pagination::v-deep :hover {
-        color: #a01c0e;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next,
-    .el-pagination.is-background::v-deep .btn-prev {
-        width: 70px;
-        height: 34px;
-        margin: 0px 10px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .el-pager li {
-        margin: 0px 10px;
-        width: 38px;
-        height: 34px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next.is-active,
-    .el-pagination.is-background::v-deep .btn-prev.is-active,
-    .el-pagination.is-background::v-deep .el-pager li.is-active {
-        background-color: #a01c0e;
-        color: #fff;
+//3.4 获得详细地址列表
+const cityName = ref('')
+const cityList = ref([])
+const chooseCityId = ref('')
+let getCityList = async (id) => {
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    if(shengData.code==200){
+        cityList.value = shengData.data;
+        cityName.value = shengData.data[0].pid_name;
+    }else{
+        ElMessage.error(shengData.message)
+    }
+}
+//3.5 初始化的时候先获取一下城市列表
+if(cityId.value != undefined){
+    getCityList(cityId.value);
+}
+//3.6 选择城市
+const chooseCity = (id) => {
+    chooseCityId.value = id;
+    router.replace({
+        query: { 
+            ...route.query, 
+            select: id
+        }
+    })
+}
+//3.选择商品所在地 end ---------------------------------------->
+
+//4.搜索 start ---------------------------------------->
+//4.1 选择一个子导航
+const selectSecond = (item) => {
+    //高亮显示当前选中的子导航
+    selectedSecondId.value = item.category_id
+    router.replace({
+        query: { ...route.query, catid: item.category_id }
+    })
+}
+
+//4.2 页面展示的数据
+const pageDataType1 = ref([]);//供应数据
+//const pageDataType2 = ref([]);//求购数据 此页面不需要求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:"",//栏目id
+        city_id:"",//城市id
+        keyword:"",//搜索关键词 - 该页不需要
+        page:1,
+        pageSize:10,
+        type_id:1//1:供应 2:求购
+    }
+
+    if(selectedSecondId.value == undefined){
+        params.catid = articleId
+    }else{
+        params.catid = parseFloat(selectedSecondId.value)
+    }
+
+    let routeCiteId = route.query.select;
+
+    if(routeCiteId != undefined && routeCiteId != ''){
+        params.city_id = parseFloat(routeCiteId)
+    }else{
+        if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+            //删除变量params中的city_id参数
+            delete params.city_id
+        }else{
+            params.city_id = parseFloat(cityId.value)
+        }
     }
 
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        pageDataType1.value = pageData.data.type1;
+        //pageDataType2.value = pageData.data.type2;
+        total.value = pageData.data.type1_count;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+        getCityList(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.4.2 监听catid
+watch(() => route.query.catid, (newVal, oldVal) => {
+    pageSearch()
+})
+//4.4.3 监听select
+//如果路由中存在select参数就忽略cityid
+watch(() => route.query.select, (newVal, oldVal) => {
+    if(newVal != undefined){
+        pageSearch()
+    }else{
+        chooseCityId.value = '';
+        pageSearch()
+    }
+})
+//4.搜索 end ---------------------------------------->
+
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
 
-}
 
+<style lang="less" scoped>
+@import '@/assets/css/shop/list.less';
 </style>

pages/xiangcunshangcheng/[dir]/index.html.vue

@@ -1,18 +1,14 @@
 <template>
     <ShopPageHead></ShopPageHead>
     <main class="index_main" id="all_vue">
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
         <!--子菜单和地区选择-->
         <ShopSubMenu2></ShopSubMenu2>
         <!-- 地区选择 -->
         <div class="categ_crumb_box clearfix_2">
             <!-- 当前位置 -->
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
                 <NuxtLink
                     :to="`/xiangcunshangcheng/index.html`"
                     class="categ_crumb_left_a"
@@ -67,12 +63,9 @@
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
                     <span class="categ_head_a">供应信息列表</span>
-                    <nuxt-link 
-                        to="/xiangcunshangcheng/nongfuchanpin/gongying/list-1.html"
-                        class="categ_head_a_more"
-                    >
-                        查看更多 &gt; 
-                    </nuxt-link>
+                    <span class="categ_head_a_more" @click="pageShopList(1)" v-if="pageDataType1.length != 0">
+                        查看更多 &gt;
+                    </span>
                 </div>
                 <div class="categ_table clearfix">
                     <div class="categ_table_head_box">
@@ -112,12 +105,9 @@
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
                     <span class="categ_head_a">求购信息列表</span>
-                    <nuxt-link 
-                        to="/xiangcunshangcheng/nongfuchanpin/qiugou/list-1.html"
-                        class="categ_head_a_more"
-                    >
-                        查看更多 &gt; 
-                    </nuxt-link>
+                    <span class="categ_head_a_more" @click="pageShopList(2)" v-if="pageDataType2.length != 0">
+                        查看更多 &gt;
+                    </span>
                 </div>
                 <div class="categ_table clearfix">
                     <div class="categ_table_head_box">
@@ -170,6 +160,7 @@ const route = useRoute();
 const router = useRouter()
 let articleId = 0; //把路径转换为数据id
 const targetSegment = getRoutePath(2);//返回第二层的路径id
+
 //通过导航路径反向查询导航id
 const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
     method: 'GET',
@@ -214,48 +205,47 @@ let getSecondNav = async () => {
     });
     if (listData.code == 200) {
         secondNav.value = listData.data
+        console.log(secondNav.value)
     } else {
         console.log("错误位置：获得子级栏目列表")
     }
 }
 getSecondNav();
 
+
 //2.4 获得cityid
 const cityId = ref(route.query.cityid)
 //2.页面路径 end ---------------------------------------->
 
 //3.选择商品所在地 start ---------------------------------------->
-//您可以选择以下详细分类：
-const choice_categ_num = ref(1)
-// 您可以选择以下详细地区=btn
-const if_categ_crumb_panel_btn_num = ref(0)
-const if_categ_crumb_panel = ref(false)// 当前商品所在地下拉板
-const if_categ_crumb_panel_click = ref(false)// //判断是否点击在下拉板内
+//3.1 弹出下拉框
+const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
+const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
 const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
     if_categ_crumb_panel.value = !if_categ_crumb_panel.value
 }
 const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
-    setTimeout(() => {//的延迟器
-        if (if_categ_crumb_panel_click.value == true) {//判断鼠标是否点击下拉panel
+    setTimeout(() => {
+        if (if_categ_crumb_panel_click.value == true) {
             //点击在下拉panel内
-        } else {//没点击在下拉panel内
+        } else {
+            //没点击在下拉panel内
             if_categ_crumb_panel.value = false
         }
     }, 100);
 }
-//点击下拉panel
+//3.2 点击下拉panel
 const categ_crumb_panel_focus_fun = () => {
     if_categ_crumb_panel_click.value = true
     if_categ_crumb_panel.value = true
 }
-//下拉panel失去焦点事件
+//3.3 下拉panel失去焦点事件
 const categ_crumb_panel_blur_fun = () => {
     if_categ_crumb_panel_click.value = false
     if_categ_crumb_panel.value = false
 }
 
-
-//获得详细地址列表
+//3.4 获得详细地址列表
 const cityName = ref('')
 const cityList = ref([])
 const chooseCityId = ref('')
@@ -266,8 +256,6 @@ let getCityList = async (id) => {
             'pid': id,
         },
     });
-    console.log(id)
-    console.log(shengData)
     if(shengData.code==200){
         cityList.value = shengData.data;
         cityName.value = shengData.data[0].pid_name;
@@ -275,14 +263,15 @@ let getCityList = async (id) => {
         ElMessage.error(shengData.message)
     }
 }
-//初始化的时候先获取一下城市列表
+//3.5 初始化的时候先获取一下城市列表
 if(cityId.value != undefined){
     getCityList(cityId.value);
 }
-//选择城市
+//3.6 选择城市
 const chooseCity = (id) => {
     chooseCityId.value = id;
     router.replace({
+        path: route.path,
         query: { 
             ...route.query, 
             select: id
@@ -296,14 +285,18 @@ const chooseCity = (id) => {
 const selectSecond = (item) => {
     //高亮显示当前选中的子导航
     selectedSecondId.value = item.category_id
-    router.replace({
-        query: { ...route.query, catid: item.category_id }
+    //带着catid，cityid，select跳转（如果有）
+    router.push({
+        path: `/xiangcunshangcheng/${targetSegment}/${item.aLIas_pinyin}/index.html`,
+        //query: { ...route.query, catid: item.category_id }
     })
 }
 
+//4.2 页面展示的数据
 const pageDataType1 = ref([]);//供应数据
 const pageDataType2 = ref([]);//求购数据
 
+//4.3 发起搜索
 const pageSearch = async () => {
     let params = {
         catid:"",//栏目id
@@ -351,7 +344,8 @@ const pageSearch = async () => {
 //页面初始化的时候调用一下搜索
 pageSearch();
 
-//每次路由一变化就重新请求数据
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
 watch(() => route.query.cityid, (newVal, oldVal) => {
     if(newVal != undefined){
         cityId.value = parseFloat(newVal)
@@ -361,11 +355,12 @@ watch(() => route.query.cityid, (newVal, oldVal) => {
     }
     pageSearch()
 })
-
-watch(() => route.query.catid, (newVal, oldVal) => {
-    pageSearch()
-})
-
+//4.4.2 监听catid
+// watch(() => route.query.catid, (newVal, oldVal) => {
+//     pageSearch()
+// })
+//4.4.3 监听select
+//如果路由中存在select参数就忽略cityid
 watch(() => route.query.select, (newVal, oldVal) => {
     if(newVal != undefined){
         pageSearch()
@@ -383,7 +378,7 @@ onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //从客户端启动广告
     //广告1
-    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopcategory_0001`
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
     const responseAd1 = await fetch(url, {
         headers: {
             'Content-Type': 'application/json',
@@ -396,6 +391,33 @@ onMounted(async () => {
 })
 //5.广告 end ---------------------------------------->
 
+
+//6.跳转到列表页 start ---------------------------------------->
+const pageShopList = (type) => {
+    const { cityid, select } = route.query
+
+    const queryParams = {
+        ...(cityid && { cityid }),
+        ...(select && { select })
+    }
+
+    if(type == 1){
+        //type==1 跳转到供应列表页
+        const targetPath = `/xiangcunshangcheng/${targetSegment}/gongying/list-1.html`
+        router.push({
+            path: targetPath,
+            query: queryParams
+        })
+    }else{
+        //type==2 跳转到求购列表页
+        const targetPath = `/xiangcunshangcheng/${targetSegment}/qiugou/list-1.html`
+        router.push({
+            path: targetPath,
+            query: queryParams
+        })
+    }
+}
+//6.跳转到列表页 end ---------------------------------------->
 </script>
 
 <style lang="less" scoped>

pages/xiangcunshangcheng/[dir]/qiugou/[id].html.vue

@@ -0,0 +1,293 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <ShopSubMenu></ShopSubMenu>
+        <!-- 当前位置 -->
+        <div class="categ_crumb_box2 clearfix_2">
+            <div class="categ_crumb_left">
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
+                &gt;
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/qiugou/list-1.html`"
+                    class="categ_crumb_left_a"
+                >
+                    求购
+                </NuxtLink>
+                &gt;
+                <span class="categ_crumb_left_text">{{shopData.name}}</span>
+            </div>
+        </div>
+
+        <div class="supply_1_index_qiugou clearfix">
+            <div class="supply_1_index_qiugou_left">
+                <img class="supply_1_img" :src="shopImg" :alt="shopData.name">
+                <div class="supply_1_right_qiugou">
+                    <h4 class="supply_1_h4">求购：{{shopData.name}}</h4>
+                    <div class="supply_1_ul_qiugou clearfix">
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">发布日期</label><span
+                            class="supply_1_li_text ">{{getTimeText(shopData.created_at)}}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">截止日期</label><span
+                            class="supply_1_li_text ">{{getValidityTime(shopData)}}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">浏览次数</label><span
+                            class="supply_1_li_text ">{{ shopData.hits }}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">联 系 人</label><span
+                            class="supply_1_li_text ">{{ shopData.contact}}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">发布地区</label><span
+                            class="supply_1_li_text ">{{ shopData.address }}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">座 机</label><span
+                            class="supply_1_li_text ">{{ shopData.landline }}</span></div>
+                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">联系电话</label><span
+                            class="supply_1_li_text ">{{ shopData.phone }}</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="supply_1_index_qiugou_right">
+                <div class="shop_3_right clearfix">
+                    <div class="choice_1_box clearfix">
+                        <div class="choice_1_btn_box clearfix">
+                            <div class="choice_1_btn" 
+                                :class="{ choice_1_btn_only: choice_1_num == 1 }"
+                                @mouseover="choice_1_num = 1">
+                                <span class="choice_1_btn_a">供应商品</span>
+                            </div>
+                            <div class="choice_1_btn" 
+                                :class="{ choice_1_btn_only: choice_1_num == 2 }"
+                                @mouseover="choice_1_num = 2">
+                                <span class="choice_1_btn_a">求购商品</span>
+                            </div>
+                        </div>
+                        <div class="choice_1_card_box">
+                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 1">
+                                <div class="shop_li_img_2" v-for="(item,index) in boxData1">
+                                    <nuxtLink 
+                                        :to="getShopPathDetail1(item)"
+                                        class="shop_li_img_2_a"
+                                    >
+                                        <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
+                                        <div class="shop_li_img_2_right clearfix">
+                                            <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
+                                            <div class="shop_li_img_2_text">
+                                                {{item.name}}
+                                            </div>
+                                        </div>
+                                    </nuxtLink>
+                                </div>
+                            </div>
+                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 2">
+                                <div class="shop_li_img_2" v-for="(item,index) in boxData2">
+                                    <nuxtLink 
+                                        :to="getShopPathDetail1(item)"
+                                        class="shop_li_img_2_a"
+                                    >
+                                        <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
+                                        <div class="shop_li_img_2_right clearfix">
+                                            <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
+                                            <div class="shop_li_img_2_text">
+                                                {{item.name}}
+                                            </div>
+                                        </div>
+                                    </nuxtLink>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="supply_2_index clearfix">
+
+            <div class="supply_head_box clearfix_2">
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 1 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 1">详情信息</a>
+                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 2 == supply_choice_1_num }"
+                    @mouseover="supply_choice_1_num = 2">发布人信息</a>
+            </div>
+
+            <div class="supply_art_out clearfix">
+                <!-- 详情信息 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 1" v-html="shopData.detail"></div>
+                <!-- 发布人信息 -->
+                <div class="supply_art_box" v-show="supply_choice_1_num == 2">
+                    <p class="supply_art_box_p">公司名称：</p>
+                    <p class="supply_art_box_p">电子邮箱：{{shopData.email}}</p>
+                    <p class="supply_art_box_p">邮政编码：{{shopData.postal}}</p>
+                    <p class="supply_art_box_p">联系地址：{{shopData.address}}</p>
+                </div>
+            </div>
+        </div>
+        <ShopHotNews></ShopHotNews>
+    </main>
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup } from 'element-plus'
+//1.2选项卡 
+const supply_choice_1_num = ref(1)
+//1.3是否展示有效期
+const getValidityTime = (shopData) => {
+    if(shopData.islong==1){
+        return "无期限"
+    }else{
+        if(shopData.validity){
+            return shopData.validity.split(' ')[0];
+        }
+    }
+}
+//1.4 格式化字符串时间
+const getTimeText = (time) => {
+    if(time){
+        return time.split(' ')[0];
+    }else{
+        return '';
+    }
+}
+// 1.4应商品与求购商品的选项卡	
+const choice_1_num = ref(1)
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+let articleId = 0; //把路径转换为数据id
+const name = ref('') //当前频道名称
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id;
+    name.value = getRouteId.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+
+
+//2.3 获得子栏目列表
+const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': articleId,
+            'num': 50,
+        },
+    });
+    if (listData.code == 200) {
+        secondNav.value = listData.data
+    } else {
+        console.log("错误位置：获得子级栏目列表")
+    }
+}
+getSecondNav();
+
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.获得商品详情 start ---------------------------------------->
+const shopId = ref(route.params.id) //获得商品的id
+const shopData = ref({});
+const shopImg = ref("")
+
+let getShopData = async () => {
+    const shopReq = await requestDataPromise('/web/getWebsiteshopInfo', {
+        method: 'GET',
+        query: {
+            'id': parseFloat(shopId.value),
+        },
+    });
+
+    if (shopReq.code == 200) {
+        console.log(667788)
+        console.log(shopReq)
+        shopData.value = shopReq.data
+        shopImg.value = shopReq.data.imgurl[0]
+    } else {
+        console.log("错误位置：获得商品详情")
+    }
+}
+getShopData();
+
+//获得右侧供应与求购的内容
+const boxData1 = ref([]) //供应商品
+const boxData2 = ref([]) //求购商品
+
+//创建请求数据json
+let getJson = [
+    {"level":"5,0,6"},//供应商品
+    {"level":"6,0,6"},//求购商品
+]
+
+let jsonString = JSON.stringify(getJson)
+
+//获取所有数据
+async function getPageAllData() {
+    const mkdata = await requestDataPromise('/web/getWebsiteshop', {
+        method: 'GET',
+        query: {
+            'catid': 346,
+            'id': jsonString,
+        },
+    });
+
+    if (mkdata.code == 200) {
+        //供应商品
+        boxData1.value = mkdata.data.goods[0];
+        //求购商品
+        boxData2.value = mkdata.data.goods[1];
+    } else {
+        ElMessage.error(mkdata.message)
+    }
+}
+getPageAllData();
+//3.获得商品详情 end  ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopdetail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
+<style lang="less" scoped>
+@import '@/assets/css/shop/detail.less';
+</style>

pages/xiangcunshangcheng/[dir]/qiugou/list-[id].html.vue

@@ -2,31 +2,35 @@
     <ShopPageHead></ShopPageHead>
     <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
     <main class="index_main" id="all_vue">
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
         <!--子菜单和地区选择-->
-        <ShopSubMenu></ShopSubMenu>
-
+        <ShopSubMenu2></ShopSubMenu2>
         <!-- 地区选择 -->
         <div class="categ_crumb_box clearfix_2">
             <!-- 当前位置 -->
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 乡村商城 </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    {{name}}
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 农副产品 </a>
-                &gt;
-                <span class="categ_crumb_left_text"> 皮毛畜禽 </span>
+                <span class="categ_crumb_left_text">求购</span>
             </div>
             <!-- 当前位置 -->
             <!-- 当前商品所在地 -->
-            <div class="categ_crumb_right clearfix">
+            <div class="categ_crumb_right clearfix" v-if="cityList.length > 0">
                 <div class="categ_crumb_right_text">当前商品所在地：</div>
-                <div class="categ_crumb_right_text hand">天津</div>
+                <div class="categ_crumb_right_text hand">{{cityName}}</div>
                 <div class="categ_crumb_right_btn back100 hand" @click="btn_if_categ_crumb_panel_fun" tabindex="1"
                     @blur="categ_crumb_panel_btn_blur_fun">
                 </div>
@@ -36,36 +40,37 @@
                 @click="categ_crumb_panel_focus_fun" @blur="categ_crumb_panel_blur_fun">
                 <h4 class="categ_crumb_panel_h4">您可以选择以下详细地区</h4>
                 <div class="categ_crumb_panel_btn_box clearfix">
-                    <span class="categ_crumb_panel_btn hand"
-                        :class="{ categ_crumb_panel_btn_only: per_index == if_categ_crumb_panel_btn_num }"
-                        v-for="(per_obj, per_index) in 11" :key="per_obj"
-                        @click="if_categ_crumb_panel_btn_num = per_index">
-                        <!-- {{per_index+1}} -->
-                        长安区
+                    <span 
+                        class="categ_crumb_panel_btn hand"
+                        :class="{ categ_crumb_panel_btn_only: item.id == chooseCityId }"
+                        v-for="item in cityList"
+                        @click="chooseCity(item.id)"
+                    >
+                        {{ item.name }}
                     </span>
                 </div>
             </div>
         </div>
         <!-- 您可以选择以下详细地区 -->
-        <div class="categ_grey_box clearfix">
+        <div class="categ_grey_box clearfix" v-if="secondNav.length > 0">
             <div class="categ_grey_head">您可以选择以下详细分类：</div>
             <div class="categ_grey_ul clearfix">
-                <!-- <span class="categ_grey_btn hand" :class="{ categ_grey_btn_only: per_index + 1 == choice_categ_num }"
-                              v-for="(per_obj, per_index) in 3" :key="per_obj" @click="choice_categ_num = per_index + 1">
-                              {{ per_index + 1 }}粮油茶糖
-                        </span> -->
-                <span class="categ_grey_btn hand">粮油茶糖</span>
-                <span class="categ_grey_btn hand categ_grey_btn_only">粮油茶糖</span>
-                <span class="categ_grey_btn hand">粮油茶糖</span>
+                <span 
+                    :class="['categ_grey_btn hand', { 'categ_grey_btn_only': selectedSecondId == item.category_id }]"
+                    v-for="item in secondNav"
+                    @click="selectSecond(item)"
+                >
+                    {{ item.alias }}
+                </span>
             </div>
         </div>
         <!-- 您可以选择以下详细地区 -->
+
         <!-- 供应信息列表 -->
-        <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
         <div class=" clearfix">
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
-                    <a class="categ_head_a" href="" title="">求购信息列表</a>
+                    <a class="categ_head_a" href="" title="">供应信息列表</a>
                 </div>
                 <div class="categ_table clearfix">
                     <div class="categ_table_head_box">
@@ -74,132 +79,31 @@
                         <div class="categ_table_td_3">发布时间</div>
                         <div class="categ_table_td_4">地区</div>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
+                    <div class="categ_table_li" v-for="item in pageDataType2">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
                             <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" :alt="item.name">
                             </div>
                             <div class="search_table_td_2 ">
                                 <div class="search_table_td_2_in clearfix">
                                     <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.name }}
                                     </div>
                                     <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.description }}
                                     </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
                                 </div>
                             </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
+                            <div class="categ_table_td_3">{{ getTime(item.created_at, 'year', 1) }}</div>
+                            <div class="categ_table_td_4 dot1">{{ item.city_name }}</div>
+                        </NuxtLink>
                     </div>
                 </div>
             </div>
-
             <!-- 分页器 -->
             <div class="pagination" v-if="total">
                 <el-pagination 
@@ -214,1252 +118,247 @@
                 />
             </div>
         </div>
-        <!-- 点击排行 -->
-        <div class="categ_3_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">点击排行</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_1">
-                <div class="categ_li_img_1" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_1_a" href="" title="">
-                        <img class="categ_li_img_1_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_1_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <!-- 最新商机 -->
-        <div class="categ_5_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新商机</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_2">
-                <div class="categ_li_img_2" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_2_a" href="" title="">
-                        <img class="categ_li_img_2_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_2_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
+        <ShopHotNews></ShopHotNews>
     </main>
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-<script setup>
-import { ref, onMounted } from 'vue'
-import { ElRadio, ElRadioGroup, ElPagination } from 'element-plus'
 
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage,ElPagination } from 'element-plus'
 
 //分页
-let total = ref(50);
-
-
-const radio1 = ref('1')
-// vue选项卡	
-const choice_1_num = ref(1)
-//我要卖
-const alert_1_num = ref(0)
-// 地区选择
-const shop_name_num = ref(1)
-const shop_name_parent = ref(null)
-const shop_name_leng = ref(1)
-//您可以选择以下详细分类：
-const choice_categ_num = ref(1)
-// 您可以选择以下详细地区=btn
-const if_categ_crumb_panel_btn_num = ref(0)
-const if_categ_crumb_panel = ref(false)// 当前商品所在地下拉板
-const if_categ_crumb_panel_click = ref(false)// //判断是否点击在下拉板内
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/xiangcunshangcheng/${targetSegment}/gongying/list-${value}.html`)
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+let articleId = 0; //把路径转换为数据id
+const name = ref('') //当前频道名称
+const targetSegment = getRoutePath(2);//返回第二层的路径id
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id;
+    name.value = getRouteId.data.alias;
+}else{
+    console.log("错误位置：获得页面路径")
+}
+//2.3 获得子栏目列表
+const secondNav = ref([]);
+const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': articleId,
+            'num': 50,
+        },
+    });
+    if (listData.code == 200) {
+        secondNav.value = listData.data
+    } else {
+        console.log("错误位置：获得子级栏目列表")
+    }
+}
+getSecondNav();
+
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.页面路径 end ---------------------------------------->
+
+//3.选择商品所在地 start ---------------------------------------->
+//3.1 弹出下拉框
+const if_categ_crumb_panel = ref(false)//当前商品所在地下拉板
+const if_categ_crumb_panel_click = ref(false)//判断是否点击在下拉板内
 const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
     if_categ_crumb_panel.value = !if_categ_crumb_panel.value
 }
-const categ_crumb_panel_btn_blur_fun = () => {// btn失去焦点事件
-    setTimeout(() => {//的延迟器
-        if (if_categ_crumb_panel_click.value == true) {//判断鼠标是否点击下拉panel
+const categ_crumb_panel_btn_blur_fun = () => {//btn失去焦点事件
+    setTimeout(() => {
+        if (if_categ_crumb_panel_click.value == true) {
             //点击在下拉panel内
-        } else {//没点击在下拉panel内
+        } else {
+            //没点击在下拉panel内
             if_categ_crumb_panel.value = false
         }
-    }, 666);
+    }, 100);
 }
-const categ_crumb_panel_focus_fun = () => {//点击下拉panel
+//3.2 点击下拉panel
+const categ_crumb_panel_focus_fun = () => {
     if_categ_crumb_panel_click.value = true
     if_categ_crumb_panel.value = true
 }
-const categ_crumb_panel_blur_fun = () => {// 下拉panel失去焦点事件
+//3.3 下拉panel失去焦点事件
+const categ_crumb_panel_blur_fun = () => {
     if_categ_crumb_panel_click.value = false
     if_categ_crumb_panel.value = false
 }
 
-</script>
-
-
-
-<style lang="less" scoped>
-@charset "utf-8";
-
-* {
-    margin: 0;
-    padding: 0;
-    font-family: "微软雅黑", "microsoft yahei";
-}
-
-ul,
-ol {
-    list-style: none;
-}
-
-a:active {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-a:visited {
-    text-decoration: none;
-}
-
-a:link {
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: none;
-}
-
-body {
-    position: relative;
-}
-
-.clearfix {
-    overflow: hidden;
-}
-
-.clearfix_2::after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.hiddenColor {
-    visibility: hidden;
-}
-
-.hand {
-    cursor: pointer;
-}
-
-.aTag_parent {
-    position: relative;
-}
-
-.aTag_parent>a,
-.aTag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 99;
-    border: 0px;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.dot1 {
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dot2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.dot3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-input,
-img {
-    border: none;
-}
-
-.cover100 img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.back100 {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-article,
-aside,
-footer,
-header,
-time,
-video,
-main,
-nav,
-h4,
-h3,
-section {
-    display: block;
-}
-
-.index_main {
-    margin: 0 auto 30px;
-}
-
-.slow_6 {
-    -webkit-transition: all .6s;
-    -moz-transition: all .6s;
-    -ms-transition: all .6s;
-    -o-transition: all .6s;
-    transition: all .6s;
-}
-
-.index_main {
-    width: 1200px;
-}
-
-.shop_head {
-    margin: 30px auto 0px;
-
-    .shop_head_left {
-        float: left;
-        width: 322px;
-        margin-right: 33px;
-    }
-
-    .shop_head_left_a {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_img {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_form_out {
-        width: 550px;
-        float: left;
-    }
-
-    .shop_head_form {
-        margin-top: 37px;
-        display: block;
-        width: 547px;
-        border: solid 1px #A01C0E;
-        height: 40px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-
-    .shop_head_btn {
-        float: right;
-        width: 52px;
-        height: 100%;
-        border: solid 1px #fff;
-        box-sizing: border-box;
-        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
-        background-size: 22px 22px;
-    }
-
-    .shop_head_inp {
-        display: block;
-        text-indent: 11px;
-        height: 40px;
-        line-height: 40px;
-        width: 490px;
-    }
-
-    .shop_head_form_foot {
-        width: 550px;
-        margin-top: 10px;
-    }
-
-    .shop_head_form_foot_a {
-        float: left;
-        height: 18px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-right: 10px;
-    }
-
-    .shop_head_form_foot_a:nth-of-type(1) {
-        color: #A01C0E;
-    }
-
-    .shop_head_form_foot_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_head_right {
-        float: right;
-        margin-top: 37px;
-        position: relative;
-    }
-
-    .shop_head_right_btn {
-        float: right;
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        color: #666;
-        font-size: 14px;
-        margin-left: 10px;
-        text-indent: 52px;
-        border: 1px solid #E9E9E9;
-        background: no-repeat 20px center #F4F4F4;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1) {
-        background-image: url(@/public/img/4.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2) {
-        background-image: url(@/public/img/5.png);
-    }
-
-    .shop_head_right_btn:hover {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1):hover {
-        background-image: url(@/public/img/4a.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2):hover {
-        background-image: url(@/public/img/5a.png);
-    }
-
-    .shop_head_right_btn_1_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/4a.png) !important;
-    }
-
-    .shop_head_right_btn_2_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/5a.png) !important;
-    }
-
-    .shop_head_right_btn:hover .shop_head_right_out {
-        display: block;
-    }
-
-    .shop_head_right_box {
-        background: #fff;
-        height: 1111px;
-        margin-top: 20px;
-    }
-
-    .shop_alert_out {
-        position: absolute;
-        width: 1036px;
-        right: 0px;
-        top: 99%;
-        z-index: 111;
-    }
-
-    .shop_alert_box {
-        background: #fff;
-        box-sizing: border-box;
-        padding: 0px 20px;
-        border: solid 1px #A01C0E;
-        width: 100%;
-        margin-top: 20px;
-    }
-
-    .shop_alert_head_box {}
-
-    .shop_alert_head_name_1 {
-        float: left;
-        font-weight: bold;
-        color: #A01C0E;
-        font-size: 20px;
-        margin-top: 30px;
-        letter-spacing: 1px;
-    }
-
-    .shop_alert_head_name_2 {
-        float: left;
-        color: #333;
-        font-size: 16px;
-        margin: 35px 0px 0px 10px;
-        position: relative;
-        padding-left: 22px;
-        font-weight: bold;
-    }
-
-    .shop_alert_head_name_2::after {
-        content: '';
-        display: block;
-        width: 14px;
-        height: 10px;
-        position: absolute;
-        left: 0px;
-        bottom: 3px;
-        background: url(@/public/img/16.png) no-repeat left 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_head_btn_a {
-        float: right;
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        font-size: 14px;
-        padding: 0px 20px 0px 36px;
-        margin-top: 23px;
-        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
-        background-size: 14px auto;
-    }
-
-    .shop_alert_ul {
-        margin: 28px auto 0px;
-        width: 980px;
-    }
-
-    .shop_alert_li {
-        margin-bottom: 11px;
-        display: flex;
-    }
-
-    .shop_alert_li_label {
-        width: 150px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 24px;
-        font-weight: bold;
-        position: relative;
-        box-sizing: border-box;
-        margin-right: 20px;
-    }
-
-    .shop_alert_li_label::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 22px;
-        height: 22px;
-        background: url(@/public/img/15.png) no-repeat right 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_li_panel {}
-
-    .shop_alert_li_panel_a {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        margin: 0px 25px 10px 0px;
-    }
-
-    .shop_alert_li_panel_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_alert_1_index {
-        margin-top: 20px;
-    }
-
-    .shop_alert_img_ul {
-        margin-top: 30px;
-    }
-
-    .shop_alert_img_li {
-        float: left;
-        width: 314px;
-        margin: 0px 26px 30px 0px;
-        box-sizing: border-box;
-    }
-
-    .shop_alert_img_li_a {
-        display: block;
-        width: 100%;
-    }
-
-    .shop_alert_img_li_img {
-        width: 130px;
-        height: 130px;
-        margin-right: 10px;
-        float: left;
-    }
-
-    .shop_alert_img_li_right {
-        width: 173px;
-        float: right;
-    }
-
-    .shop_alert_img_li_h4 {
-        height: 18px;
-        line-height: 18px;
-        color: #333;
-        font-size: 14px;
-        font-weight: bold;
-        margin-top: 7px;
-    }
-
-    .shop_alert_img_li_dot3 {
-        height: 48px;
-        line-height: 16px;
-        color: #666;
-        font-size: 12px;
-        margin-top: 13px;
-    }
-
-    .shop_alert_img_li_time {
-        float: left;
-        height: 26px;
-        line-height: 26px;
-        color: rgba(51, 51, 51, 0.4);
-        font-size: 12px;
-        margin-top: 18px;
-        background: #f7f7f7;
-        padding: 0px 4px;
-    }
-
-    .shop_alert_img_li:nth-of-type(3n) {
-        margin-right: 0;
-    }
-
-    .shop_alert_img_li_a:hover * {
-        color: #A01C0E;
-    }
-}
-
-.shop_banner {
-    width: 1200px;
-    overflow: hidden;
-    margin: 20px auto 0px;
-
-    .shop_banner_a {
-        display: block;
-        width: 1200px;
-        height: 90px;
-    }
-
-    .shop_banner_img {
-        display: block;
-        width: 1200px;
-    }
-}
-
-.shop_nav {
-    border: solid 1px #E9E9E9;
-    background: #fafafa;
-    margin-top: 20px;
-}
-
-.shop_nav_head {
-    float: left;
-    height: 28px;
-    width: 138px;
-    margin: 30px 52px 0px 25px;
-
-    .shop_nav_head_a {
-        display: block;
-        height: 28px;
-        width: 138px;
-        background: url(@/public/img/7.png) no-repeat left top;
-        background-size: 100% 100%;
-    }
-}
-
-.shop_nav_in {
-    float: left;
-
-    .shop_nav_in_a {
-        float: left;
-        height: 75px;
-        line-height: 75px;
-        color: #333;
-        font-size: 16px;
-        background: #f8f5f5;
-        width: 118px;
-        border-bottom: solid 5px #A01C0E;
-        font-weight: bold;
-        margin: 5px 0;
-        text-align: center;
-    }
-
-    .shop_nav_in_a:nth-of-type(4) {
-        margin-right: 8px;
-    }
-
-    .shop_nav_in_a:hover {
-        color: #A01C0E;
-    }
-}
-
-.shop_name_in {
-    float: left;
-    height: 40px;
-    width: 1046px;
-    float: left;
-    box-sizing: border-box;
-
-    .shop_name_a {
-        float: left;
-        height: 27px;
-        line-height: 27px;
-        color: #222;
-        font-size: 20px;
-        position: relative;
-        margin: 7px 14.5px 0;
-        padding: 0px 10px;
-    }
-
-    .shop_name_a::after {
-        content: '/';
-        display: block;
-        position: absolute;
-        top: 0px;
-        right: -18px;
-        height: 100%;
-        line-height: 27px;
-        color: #E9E9E9;
-        font-size: 20px;
-    }
-
-    .shop_name_a:nth-last-of-type(1)::after {
-        content: '';
-        display: none;
-    }
-
-    .shop_name_a_only {
-        background: #A01C0E;
-        color: #fff;
-    }
-}
-
-.shop_name_out {
-    margin-top: 20px;
-}
-
-.shop_name_box {
-    border-top: solid 1px #fff;
-}
-
-.shop_name_box_a {
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.shop_name {
-    float: left;
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    position: relative;
-    z-index: 11;
-    text-align: center;
-    font-size: 20px;
-    background: #A01C0E;
-    padding: 0px 14px;
-}
-
-.shop_name_right {
-    height: 40px;
-    border-bottom: 1px solid #E8E9EC;
-    margin-top: 4px;
-    background: #F8F8F8;
-    position: relative;
-    z-index: 2;
-}
-
-.shop_name_right::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    width: 16px;
-    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
-    background-size: 100% auto;
-}
-
-.shop_name_btn {
-    width: 24px;
-    height: 24px;
-    float: right;
-    margin: 10px 22px 0px 0px;
-    background: url(@/public/img/8.png) no-repeat center center;
-    border-radius: 50%;
-    background-size: 100% 100%;
-}
-
-.shop_2_left {
-    float: left;
-    width: 900px;
-}
-
-.shop_3_right {
-    float: right;
-    width: 280px;
-}
-
-.shop_1_box {
-    margin: 30px auto 0px;
-}
-
-.shop_2_box {
-    margin: 30px auto 0px;
-}
-
-.shop_3_box {
-    margin: 0px auto 0px;
-}
-
-.shop_4_box {
-    margin: 4px auto 0px;
-}
-
-.shop_5_box {
-    margin: 4px auto 0px;
-}
-
-.categ_crumb_box {
-    margin-top: 20px;
-    border-bottom: solid 1px #D9D9D9;
-    padding-bottom: 20px;
-    position: relative;
-}
-
-.categ_crumb_left {
-    float: left;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-
-    .categ_crumb_left_a {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #999;
-        font-size: 16px;
-    }
-
-    .categ_crumb_left_text {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-}
-
-.categ_crumb_right {
-    float: right;
-
-    .categ_crumb_right_text {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-
-    .categ_crumb_right_btn {
-        float: left;
-        width: 14px;
-        height: 14px;
-        background-image: url(@/public/img/17.png);
-        margin: 5px 0px 0px 5px;
-    }
-}
-
-.categ_crumb_panel {
-    position: absolute;
-    border: solid 1px #A01C0E;
-    padding: 0px 30px 10px;
-    background: #fff;
-    right: 0px;
-    top: 0px;
-    box-sizing: border-box;
-    width: 658px;
-    top: 100%;
-
-    .categ_crumb_panel_h4 {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 31px;
-        margin-top: 20px;
-        background: url(@/public/img/15.png) no-repeat right center;
-        background-size: 21px 21px;
-    }
-
-    .categ_crumb_panel_btn_box {
-        margin-top: 20px;
-    }
-
-    .categ_crumb_panel_btn {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        font-weight: bold;
-        margin: 0px 26.5px 11px 0px;
-    }
-
-    .categ_crumb_panel_btn:hover {
-        color: #A01C0E;
-    }
-
-    .categ_crumb_panel_btn_only {
-        color: #A01C0E;
-    }
-}
-
-.categ_grey_box {
-    box-sizing: border-box;
-    border: solid 1px #E9E9E9;
-    background: #F8F8F8;
-    padding: 0px 20px 8px;
-    width: 100%;
-    margin-top: 15px;
-
-    .categ_grey_head {
-        height: 48px;
-        line-height: 50px;
-        color: #000;
-        font-size: 18px;
-        border-bottom: dashed 1px #E9E9E9;
-    }
-
-    .categ_grey_ul {
-        margin: 10px 0px 0px -10px;
-    }
-
-    .categ_grey_btn {
-        float: left;
-        line-height: 29px;
-        height: 29px;
-        color: #333;
-        font-size: 16px;
-        margin: 0px 10px 7px;
-    }
-
-    .categ_grey_btn_only {
-        background: #A01C0E;
-        color: #fff;
-        padding: 0px 5px 0px;
-        margin: 0px 5px 7px;
-    }
-}
-
-.categ_head_box {
-    border-bottom: solid 1px #E9E9E9;
-    padding-bottom: 22px;
-    margin-top: 20px;
-    border-top: solid 1px rgba(0, 0, 0, 0);
-
-    .categ_head_a {
-        float: left;
-        text-indent: 15px;
-        font-size: 20px;
-        color: #333;
-        border-left: solid 3px #A01C0E;
-        height: 18px;
-        line-height: 18px;
-    }
-
-    .categ_head_a_more {
-        float: right;
-        color: #999;
-        font-size: 14px;
-        margin-top: 0px;
-    }
-}
-
-.categ_table {}
-
-.categ_table_head_box {
-    height: 61px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_head_box>.categ_table_td_1 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_2 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_3 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_4 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_td_1 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 155px;
-    margin-right: 126px;
-}
-
-.categ_table_td_2 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 480px;
-    margin-right: 124px;
-}
-
-.categ_table_td_3 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 120px;
-    margin-right: 62px;
-}
-
-.categ_table_td_4 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 133px;
-}
-
-/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
-.categ_table_li {
-    height: 161px;
-    box-sizing: border-box;
-    padding: 15px 0px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_td_1_img {
-    display: block;
-    width: 130px;
-    height: 130px;
-    margin: 0px auto;
-}
-
-.categ_table_li .categ_table_td_1 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_2 {
-    line-height: 160px;
-    line-height: 160px;
-    font-weight: bold;
-    color: #333;
-}
-
-.categ_table_li .categ_table_td_3 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_4 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_3_index {
-    margin-top: 28px;
-}
-
-.categ_ul_img_1 {
-    margin-top: 20px;
-}
-
-.categ_li_img_1 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_1_a {}
-
-.categ_li_img_1_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_1_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_1:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_1_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_1:hover .categ_li_img_1_dot2 {
-    color: #A01C0E;
-}
-
-.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/18.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/19.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/20.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_ul_img_2 {
-    margin-top: 20px;
-}
-
-.categ_li_img_2 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_2_a {}
-
-.categ_li_img_2_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_2_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_2:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_2_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_2:hover .categ_li_img_2_dot2 {
-    color: #A01C0E;
-}
-
-/*乡村网-商城-搜索-查看更多*/
-.search_head_text_box {
-    height: 18px;
-    line-height: 18px;
-    color: #333;
-    font-size: 16px;
-    float: left;
-    margin-left: 20px;
-}
-
-.search_head_text_red {
-    color: #A01C0E;
-}
-
-.search_table_td_2 {
-    float: left;
-    height: 100%;
-    width: 480px;
-    margin-right: 124px;
-
-    .search_table_td_2_head {
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        font-weight: bold;
-        width: 480px;
-    }
-
-    .search_table_td_2_dot2 {
-        max-height: 36px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-top: 5px;
-        width: 480px;
-    }
-
-    .search_table_td_2_in {
-        height: 129px;
-        width: 480px;
-        display: table-cell;
-        vertical-align: middle;
-    }
-}
-
-@media screen and (min-width:1200px) {
-    /*pc_1440*/
-    @media screen and (max-width:1440px) {
-        /*1200*/
-    }
-
-    .pc_none {
-        display: none;
-    }
-}
-
-@media screen and (max-width:599px) {}
-
-@media screen and (max-width:320px) {}
-
-
-
-.pagination {
-    margin: 40px auto 30px auto;
-    height: 34px;
-    margin-left: 141px;
-    display: flex;
-    justify-content: center;
-
-    // 鼠标移入后字体颜色
-    .el-pagination::v-deep :hover {
-        color: #a01c0e;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next,
-    .el-pagination.is-background::v-deep .btn-prev {
-        width: 70px;
-        height: 34px;
-        margin: 0px 10px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .el-pager li {
-        margin: 0px 10px;
-        width: 38px;
-        height: 34px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next.is-active,
-    .el-pagination.is-background::v-deep .btn-prev.is-active,
-    .el-pagination.is-background::v-deep .el-pager li.is-active {
-        background-color: #a01c0e;
-        color: #fff;
+//3.4 获得详细地址列表
+const cityName = ref('')
+const cityList = ref([])
+const chooseCityId = ref('')
+let getCityList = async (id) => {
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    if(shengData.code==200){
+        cityList.value = shengData.data;
+        cityName.value = shengData.data[0].pid_name;
+    }else{
+        ElMessage.error(shengData.message)
+    }
+}
+//3.5 初始化的时候先获取一下城市列表
+if(cityId.value != undefined){
+    getCityList(cityId.value);
+}
+//3.6 选择城市
+const chooseCity = (id) => {
+    chooseCityId.value = id;
+    router.replace({
+        query: { 
+            ...route.query, 
+            select: id
+        }
+    })
+}
+//3.选择商品所在地 end ---------------------------------------->
+
+//4.搜索 start ---------------------------------------->
+//4.1 选择一个子导航
+const selectSecond = (item) => {
+    //高亮显示当前选中的子导航
+    selectedSecondId.value = item.category_id
+    router.replace({
+        query: { ...route.query, catid: item.category_id }
+    })
+}
+
+//4.2 页面展示的数据
+//const pageDataType1 = ref([]);//供应数据
+const pageDataType2 = ref([]);//求购数据 此页面不需要求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:"",//栏目id
+        city_id:"",//城市id
+        keyword:"",//搜索关键词 - 该页不需要
+        page:1,
+        pageSize:10,
+        type_id:2//1:供应 2:求购
+    }
+
+    if(selectedSecondId.value == undefined){
+        params.catid = articleId
+    }else{
+        params.catid = parseFloat(selectedSecondId.value)
+    }
+
+    let routeCiteId = route.query.select;
+
+    if(routeCiteId != undefined && routeCiteId != ''){
+        params.city_id = parseFloat(routeCiteId)
+    }else{
+        if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+            //删除变量params中的city_id参数
+            delete params.city_id
+        }else{
+            params.city_id = parseFloat(cityId.value)
+        }
     }
 
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        //pageDataType1.value = pageData.data.type1;
+        pageDataType2.value = pageData.data.type2;
+        total.value = pageData.data.type2_count;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+        getCityList(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.4.2 监听catid
+watch(() => route.query.catid, (newVal, oldVal) => {
+    pageSearch()
+})
+//4.4.3 监听select
+//如果路由中存在select参数就忽略cityid
+watch(() => route.query.select, (newVal, oldVal) => {
+    if(newVal != undefined){
+        pageSearch()
+    }else{
+        chooseCityId.value = '';
+        pageSearch()
+    }
+})
+//4.搜索 end ---------------------------------------->
+
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shoplist_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+</script>
 
-}
 
+<style lang="less" scoped>
+@import '@/assets/css/shop/list.less';
 </style>

pages/xiangcunshangcheng/search/gongying/list-[id].html.vue

@@ -1,35 +1,36 @@
 <template>
     <ShopPageHead></ShopPageHead>
-    <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
     <main class="index_main" id="all_vue">
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
-        <!--子菜单和地区选择-->
-        <ShopSubMenu></ShopSubMenu>
-
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <ShopSubMenu2></ShopSubMenu2>
         <div class="categ_crumb_box clearfix_2">
-            <!-- 当前位置 -->
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 乡村商城 </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/search/search`"
+                    class="categ_crumb_left_a"
+                >
+                    搜索
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 搜索 </a>
+                <span class="categ_crumb_left_text">供应</span>
             </div>
-            <!-- 当前位置 -->
         </div>
         <!-- 供应信息列表 -->
-        <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
         <div class=" clearfix">
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
                     <a class="categ_head_a" href="" title="">供应信息列表</a>
                     <div class="search_head_text_box">
                         搜索到有关的供应信息：共 
-                        <span class="search_head_text_red">4770 </span>
+                        <span class="search_head_text_red">{{total}}</span>
                         条
                     </div>
                 </div>
@@ -40,132 +41,31 @@
                         <div class="categ_table_td_3">发布时间</div>
                         <div class="categ_table_td_4">地区</div>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
+                    <div class="categ_table_li" v-for="item in pageDataType1">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
                             <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" :alt="item.name">
                             </div>
                             <div class="search_table_td_2 ">
                                 <div class="search_table_td_2_in clearfix">
                                     <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.name }}
                                     </div>
                                     <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.description }}
                                     </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
                                 </div>
                             </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
+                            <div class="categ_table_td_3">{{ getTime(item.created_at, 'year', 1) }}</div>
+                            <div class="categ_table_td_4 dot1">{{ item.city_name }}</div>
+                        </NuxtLink>
                     </div>
                 </div>
             </div>
-
             <!-- 分页器 -->
             <div class="pagination" v-if="total">
                 <el-pagination 
@@ -180,1252 +80,121 @@
                 />
             </div>
         </div>
-        <!-- 点击排行 -->
-        <div class="categ_3_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">点击排行</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_1">
-                <div class="categ_li_img_1" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_1_a" href="" title="">
-                        <img class="categ_li_img_1_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_1_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <!-- 最新商机 -->
-        <div class="categ_5_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新商机</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_2">
-                <div class="categ_li_img_2" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_2_a" href="" title="">
-                        <img class="categ_li_img_2_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_2_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
+        <ShopHotNews></ShopHotNews>
     </main>
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-<script setup>
-import { ref, onMounted } from 'vue'
-import { ElRadio, ElRadioGroup, ElPagination } from 'element-plus'
 
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage,ElPagination } from 'element-plus'
 
 //分页
-let total = ref(50);
-
-
-const radio1 = ref('1')
-// vue选项卡	
-const choice_1_num = ref(1)
-//我要卖
-const alert_1_num = ref(0)
-// 地区选择
-const shop_name_num = ref(1)
-const shop_name_parent = ref(null)
-const shop_name_leng = ref(1)
-//您可以选择以下详细分类：
-const choice_categ_num = ref(1)
-// 您可以选择以下详细地区=btn
-const if_categ_crumb_panel_btn_num = ref(0)
-const if_categ_crumb_panel = ref(false)// 当前商品所在地下拉板
-const if_categ_crumb_panel_click = ref(false)// //判断是否点击在下拉板内
-const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
-    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
-}
-const categ_crumb_panel_btn_blur_fun = () => {// btn失去焦点事件
-    setTimeout(() => {//的延迟器
-        if (if_categ_crumb_panel_click.value == true) {//判断鼠标是否点击下拉panel
-            //点击在下拉panel内
-        } else {//没点击在下拉panel内
-            if_categ_crumb_panel.value = false
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/xiangcunshangcheng/search/gongying/list-${value}.html`)
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.5 获得keyword
+const keyword = ref(route.query.keyword)
+//2.页面路径 end ---------------------------------------->
+
+
+//4.搜索 start ---------------------------------------->
+//4.2 页面展示的数据
+const pageDataType1 = ref([]);//供应数据
+//const pageDataType2 = ref([]);//求购数据 此页面不需要求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:346,//栏目id
+        city_id:"",//城市id
+        keyword:keyword,//搜索关键词 
+        page:1,
+        pageSize:10,
+        type_id:1
+    }
+
+    if(keyword.value == undefined || keyword.value == '' || keyword.value == 'NaN'){
+        //删除变量params中的city_id参数
+        delete params.keyword
+    }else{
+        params.keyword = keyword.value
+    }
+
+    if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+        //删除变量params中的city_id参数
+        delete params.city_id
+    }else{
+        params.city_id = parseFloat(cityId.value)
+    }
+
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        pageDataType1.value = pageData.data.type1;
+        total.value = pageData.data.type1_count;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.搜索 end ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopsearch_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
         }
-    }, 666);
-}
-const categ_crumb_panel_focus_fun = () => {//点击下拉panel
-    if_categ_crumb_panel_click.value = true
-    if_categ_crumb_panel.value = true
-}
-const categ_crumb_panel_blur_fun = () => {// 下拉panel失去焦点事件
-    if_categ_crumb_panel_click.value = false
-    if_categ_crumb_panel.value = false
-}
-
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
 </script>
 
 
-
 <style lang="less" scoped>
-@charset "utf-8";
-
-* {
-    margin: 0;
-    padding: 0;
-    font-family: "微软雅黑", "microsoft yahei";
-}
-
-ul,
-ol {
-    list-style: none;
-}
-
-a:active {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-a:visited {
-    text-decoration: none;
-}
-
-a:link {
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: none;
-}
-
-body {
-    position: relative;
-}
-
-.clearfix {
-    overflow: hidden;
-}
-
-.clearfix_2::after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.hiddenColor {
-    visibility: hidden;
-}
-
-.hand {
-    cursor: pointer;
-}
-
-.aTag_parent {
-    position: relative;
-}
-
-.aTag_parent>a,
-.aTag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 99;
-    border: 0px;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.dot1 {
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dot2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.dot3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-input,
-img {
-    border: none;
-}
-
-.cover100 img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.back100 {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-article,
-aside,
-footer,
-header,
-time,
-video,
-main,
-nav,
-h4,
-h3,
-section {
-    display: block;
-}
-
-.index_main {
-    margin: 0 auto 30px;
-}
-
-.slow_6 {
-    -webkit-transition: all .6s;
-    -moz-transition: all .6s;
-    -ms-transition: all .6s;
-    -o-transition: all .6s;
-    transition: all .6s;
-}
-
-.index_main {
-    width: 1200px;
-}
-
-.shop_head {
-    margin: 30px auto 0px;
-
-    .shop_head_left {
-        float: left;
-        width: 322px;
-        margin-right: 33px;
-    }
-
-    .shop_head_left_a {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_img {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_form_out {
-        width: 550px;
-        float: left;
-    }
-
-    .shop_head_form {
-        margin-top: 37px;
-        display: block;
-        width: 547px;
-        border: solid 1px #A01C0E;
-        height: 40px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-
-    .shop_head_btn {
-        float: right;
-        width: 52px;
-        height: 100%;
-        border: solid 1px #fff;
-        box-sizing: border-box;
-        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
-        background-size: 22px 22px;
-    }
-
-    .shop_head_inp {
-        display: block;
-        text-indent: 11px;
-        height: 40px;
-        line-height: 40px;
-        width: 490px;
-    }
-
-    .shop_head_form_foot {
-        width: 550px;
-        margin-top: 10px;
-    }
-
-    .shop_head_form_foot_a {
-        float: left;
-        height: 18px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-right: 10px;
-    }
-
-    .shop_head_form_foot_a:nth-of-type(1) {
-        color: #A01C0E;
-    }
-
-    .shop_head_form_foot_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_head_right {
-        float: right;
-        margin-top: 37px;
-        position: relative;
-    }
-
-    .shop_head_right_btn {
-        float: right;
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        color: #666;
-        font-size: 14px;
-        margin-left: 10px;
-        text-indent: 52px;
-        border: 1px solid #E9E9E9;
-        background: no-repeat 20px center #F4F4F4;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1) {
-        background-image: url(@/public/img/4.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2) {
-        background-image: url(@/public/img/5.png);
-    }
-
-    .shop_head_right_btn:hover {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1):hover {
-        background-image: url(@/public/img/4a.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2):hover {
-        background-image: url(@/public/img/5a.png);
-    }
-
-    .shop_head_right_btn_1_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/4a.png) !important;
-    }
-
-    .shop_head_right_btn_2_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/5a.png) !important;
-    }
-
-    .shop_head_right_btn:hover .shop_head_right_out {
-        display: block;
-    }
-
-    .shop_head_right_box {
-        background: #fff;
-        height: 1111px;
-        margin-top: 20px;
-    }
-
-    .shop_alert_out {
-        position: absolute;
-        width: 1036px;
-        right: 0px;
-        top: 99%;
-        z-index: 111;
-    }
-
-    .shop_alert_box {
-        background: #fff;
-        box-sizing: border-box;
-        padding: 0px 20px;
-        border: solid 1px #A01C0E;
-        width: 100%;
-        margin-top: 20px;
-    }
-
-    .shop_alert_head_box {}
-
-    .shop_alert_head_name_1 {
-        float: left;
-        font-weight: bold;
-        color: #A01C0E;
-        font-size: 20px;
-        margin-top: 30px;
-        letter-spacing: 1px;
-    }
-
-    .shop_alert_head_name_2 {
-        float: left;
-        color: #333;
-        font-size: 16px;
-        margin: 35px 0px 0px 10px;
-        position: relative;
-        padding-left: 22px;
-        font-weight: bold;
-    }
-
-    .shop_alert_head_name_2::after {
-        content: '';
-        display: block;
-        width: 14px;
-        height: 10px;
-        position: absolute;
-        left: 0px;
-        bottom: 3px;
-        background: url(@/public/img/16.png) no-repeat left 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_head_btn_a {
-        float: right;
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        font-size: 14px;
-        padding: 0px 20px 0px 36px;
-        margin-top: 23px;
-        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
-        background-size: 14px auto;
-    }
-
-    .shop_alert_ul {
-        margin: 28px auto 0px;
-        width: 980px;
-    }
-
-    .shop_alert_li {
-        margin-bottom: 11px;
-        display: flex;
-    }
-
-    .shop_alert_li_label {
-        width: 150px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 24px;
-        font-weight: bold;
-        position: relative;
-        box-sizing: border-box;
-        margin-right: 20px;
-    }
-
-    .shop_alert_li_label::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 22px;
-        height: 22px;
-        background: url(@/public/img/15.png) no-repeat right 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_li_panel {}
-
-    .shop_alert_li_panel_a {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        margin: 0px 25px 10px 0px;
-    }
-
-    .shop_alert_li_panel_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_alert_1_index {
-        margin-top: 20px;
-    }
-
-    .shop_alert_img_ul {
-        margin-top: 30px;
-    }
-
-    .shop_alert_img_li {
-        float: left;
-        width: 314px;
-        margin: 0px 26px 30px 0px;
-        box-sizing: border-box;
-    }
-
-    .shop_alert_img_li_a {
-        display: block;
-        width: 100%;
-    }
-
-    .shop_alert_img_li_img {
-        width: 130px;
-        height: 130px;
-        margin-right: 10px;
-        float: left;
-    }
-
-    .shop_alert_img_li_right {
-        width: 173px;
-        float: right;
-    }
-
-    .shop_alert_img_li_h4 {
-        height: 18px;
-        line-height: 18px;
-        color: #333;
-        font-size: 14px;
-        font-weight: bold;
-        margin-top: 7px;
-    }
-
-    .shop_alert_img_li_dot3 {
-        height: 48px;
-        line-height: 16px;
-        color: #666;
-        font-size: 12px;
-        margin-top: 13px;
-    }
-
-    .shop_alert_img_li_time {
-        float: left;
-        height: 26px;
-        line-height: 26px;
-        color: rgba(51, 51, 51, 0.4);
-        font-size: 12px;
-        margin-top: 18px;
-        background: #f7f7f7;
-        padding: 0px 4px;
-    }
-
-    .shop_alert_img_li:nth-of-type(3n) {
-        margin-right: 0;
-    }
-
-    .shop_alert_img_li_a:hover * {
-        color: #A01C0E;
-    }
-}
-
-.shop_banner {
-    width: 1200px;
-    overflow: hidden;
-    margin: 20px auto 0px;
-
-    .shop_banner_a {
-        display: block;
-        width: 1200px;
-        height: 90px;
-    }
-
-    .shop_banner_img {
-        display: block;
-        width: 1200px;
-    }
-}
-
-.shop_nav {
-    border: solid 1px #E9E9E9;
-    background: #fafafa;
-    margin-top: 20px;
-}
-
-.shop_nav_head {
-    float: left;
-    height: 28px;
-    width: 138px;
-    margin: 30px 52px 0px 25px;
-
-    .shop_nav_head_a {
-        display: block;
-        height: 28px;
-        width: 138px;
-        background: url(@/public/img/7.png) no-repeat left top;
-        background-size: 100% 100%;
-    }
-}
-
-.shop_nav_in {
-    float: left;
-
-    .shop_nav_in_a {
-        float: left;
-        height: 75px;
-        line-height: 75px;
-        color: #333;
-        font-size: 16px;
-        background: #f8f5f5;
-        width: 118px;
-        border-bottom: solid 5px #A01C0E;
-        font-weight: bold;
-        margin: 5px 0;
-        text-align: center;
-    }
-
-    .shop_nav_in_a:nth-of-type(4) {
-        margin-right: 8px;
-    }
-
-    .shop_nav_in_a:hover {
-        color: #A01C0E;
-    }
-}
-
-.shop_name_in {
-    float: left;
-    height: 40px;
-    width: 1046px;
-    float: left;
-    box-sizing: border-box;
-
-    .shop_name_a {
-        float: left;
-        height: 27px;
-        line-height: 27px;
-        color: #222;
-        font-size: 20px;
-        position: relative;
-        margin: 7px 14.5px 0;
-        padding: 0px 10px;
-    }
-
-    .shop_name_a::after {
-        content: '/';
-        display: block;
-        position: absolute;
-        top: 0px;
-        right: -18px;
-        height: 100%;
-        line-height: 27px;
-        color: #E9E9E9;
-        font-size: 20px;
-    }
-
-    .shop_name_a:nth-last-of-type(1)::after {
-        content: '';
-        display: none;
-    }
-
-    .shop_name_a_only {
-        background: #A01C0E;
-        color: #fff;
-    }
-}
-
-.shop_name_out {
-    margin-top: 20px;
-}
-
-.shop_name_box {
-    border-top: solid 1px #fff;
-}
-
-.shop_name_box_a {
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.shop_name {
-    float: left;
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    position: relative;
-    z-index: 11;
-    text-align: center;
-    font-size: 20px;
-    background: #A01C0E;
-    padding: 0px 14px;
-}
-
-.shop_name_right {
-    height: 40px;
-    border-bottom: 1px solid #E8E9EC;
-    margin-top: 4px;
-    background: #F8F8F8;
-    position: relative;
-    z-index: 2;
-}
-
-.shop_name_right::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    width: 16px;
-    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
-    background-size: 100% auto;
-}
-
-.shop_name_btn {
-    width: 24px;
-    height: 24px;
-    float: right;
-    margin: 10px 22px 0px 0px;
-    background: url(@/public/img/8.png) no-repeat center center;
-    border-radius: 50%;
-    background-size: 100% 100%;
-}
-
-.shop_2_left {
-    float: left;
-    width: 900px;
-}
-
-.shop_3_right {
-    float: right;
-    width: 280px;
-}
-
-.shop_1_box {
-    margin: 30px auto 0px;
-}
-
-.shop_2_box {
-    margin: 30px auto 0px;
-}
-
-.shop_3_box {
-    margin: 0px auto 0px;
-}
-
-.shop_4_box {
-    margin: 4px auto 0px;
-}
-
-.shop_5_box {
-    margin: 4px auto 0px;
-}
-
-.categ_crumb_box {
-    margin-top: 20px;
-    border-bottom: solid 1px #D9D9D9;
-    padding-bottom: 20px;
-    position: relative;
-}
-
-.categ_crumb_left {
-    float: left;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-
-    .categ_crumb_left_a {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #999;
-        font-size: 16px;
-    }
-
-    .categ_crumb_left_text {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-}
-
-.categ_crumb_right {
-    float: right;
-
-    .categ_crumb_right_text {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-
-    .categ_crumb_right_btn {
-        float: left;
-        width: 14px;
-        height: 14px;
-        background-image: url(@/public/img/17.png);
-        margin: 5px 0px 0px 5px;
-    }
-}
-
-.categ_crumb_panel {
-    position: absolute;
-    border: solid 1px #A01C0E;
-    padding: 0px 30px 10px;
-    background: #fff;
-    right: 0px;
-    top: 0px;
-    box-sizing: border-box;
-    width: 658px;
-    top: 100%;
-
-    .categ_crumb_panel_h4 {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 31px;
-        margin-top: 20px;
-        background: url(@/public/img/15.png) no-repeat right center;
-        background-size: 21px 21px;
-    }
-
-    .categ_crumb_panel_btn_box {
-        margin-top: 20px;
-    }
-
-    .categ_crumb_panel_btn {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        font-weight: bold;
-        margin: 0px 26.5px 11px 0px;
-    }
-
-    .categ_crumb_panel_btn:hover {
-        color: #A01C0E;
-    }
-
-    .categ_crumb_panel_btn_only {
-        color: #A01C0E;
-    }
-}
-
-.categ_grey_box {
-    box-sizing: border-box;
-    border: solid 1px #E9E9E9;
-    background: #F8F8F8;
-    padding: 0px 20px 8px;
-    width: 100%;
-    margin-top: 15px;
-
-    .categ_grey_head {
-        height: 48px;
-        line-height: 50px;
-        color: #000;
-        font-size: 18px;
-        border-bottom: dashed 1px #E9E9E9;
-    }
-
-    .categ_grey_ul {
-        margin: 10px 0px 0px -10px;
-    }
-
-    .categ_grey_btn {
-        float: left;
-        line-height: 29px;
-        height: 29px;
-        color: #333;
-        font-size: 16px;
-        margin: 0px 10px 7px;
-    }
-
-    .categ_grey_btn_only {
-        background: #A01C0E;
-        color: #fff;
-        padding: 0px 5px 0px;
-        margin: 0px 5px 7px;
-    }
-}
-
-.categ_head_box {
-    border-bottom: solid 1px #E9E9E9;
-    padding-bottom: 22px;
-    margin-top: 20px;
-    border-top: solid 1px rgba(0, 0, 0, 0);
-
-    .categ_head_a {
-        float: left;
-        text-indent: 15px;
-        font-size: 20px;
-        color: #333;
-        border-left: solid 3px #A01C0E;
-        height: 18px;
-        line-height: 18px;
-    }
-
-    .categ_head_a_more {
-        float: right;
-        color: #999;
-        font-size: 14px;
-        margin-top: 0px;
-    }
-}
-
-.categ_table {}
-
-.categ_table_head_box {
-    height: 61px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_head_box>.categ_table_td_1 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_2 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_3 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_4 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_td_1 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 155px;
-    margin-right: 126px;
-}
-
-.categ_table_td_2 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 480px;
-    margin-right: 124px;
-}
-
-.categ_table_td_3 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 120px;
-    margin-right: 62px;
-}
-
-.categ_table_td_4 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 133px;
-}
-
-/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
-.categ_table_li {
-    height: 161px;
-    box-sizing: border-box;
-    padding: 15px 0px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_td_1_img {
-    display: block;
-    width: 130px;
-    height: 130px;
-    margin: 0px auto;
-}
-
-.categ_table_li .categ_table_td_1 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_2 {
-    line-height: 160px;
-    line-height: 160px;
-    font-weight: bold;
-    color: #333;
-}
-
-.categ_table_li .categ_table_td_3 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_4 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_3_index {
-    margin-top: 28px;
-}
-
-.categ_ul_img_1 {
-    margin-top: 20px;
-}
-
-.categ_li_img_1 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_1_a {}
-
-.categ_li_img_1_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_1_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_1:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_1_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_1:hover .categ_li_img_1_dot2 {
-    color: #A01C0E;
-}
-
-.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/18.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/19.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/20.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_ul_img_2 {
-    margin-top: 20px;
-}
-
-.categ_li_img_2 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_2_a {}
-
-.categ_li_img_2_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_2_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_2:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_2_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_2:hover .categ_li_img_2_dot2 {
-    color: #A01C0E;
-}
-
-/*乡村网-商城-搜索-查看更多*/
-.search_head_text_box {
-    height: 18px;
-    line-height: 18px;
-    color: #333;
-    font-size: 16px;
-    float: left;
-    margin-left: 20px;
-}
-
-.search_head_text_red {
-    color: #A01C0E;
-}
-
-.search_table_td_2 {
-    float: left;
-    height: 100%;
-    width: 480px;
-    margin-right: 124px;
-
-    .search_table_td_2_head {
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        font-weight: bold;
-        width: 480px;
-    }
-
-    .search_table_td_2_dot2 {
-        max-height: 36px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-top: 5px;
-        width: 480px;
-    }
-
-    .search_table_td_2_in {
-        height: 129px;
-        width: 480px;
-        display: table-cell;
-        vertical-align: middle;
-    }
-}
-
-@media screen and (min-width:1200px) {
-    /*pc_1440*/
-    @media screen and (max-width:1440px) {
-        /*1200*/
-    }
-
-    .pc_none {
-        display: none;
-    }
-}
-
-@media screen and (max-width:599px) {}
-
-@media screen and (max-width:320px) {}
-
-
-
-.pagination {
-    margin: 40px auto 30px auto;
-    height: 34px;
-    margin-left: 141px;
-    display: flex;
-    justify-content: center;
-
-    // 鼠标移入后字体颜色
-    .el-pagination::v-deep :hover {
-        color: #a01c0e;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next,
-    .el-pagination.is-background::v-deep .btn-prev {
-        width: 70px;
-        height: 34px;
-        margin: 0px 10px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .el-pager li {
-        margin: 0px 10px;
-        width: 38px;
-        height: 34px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next.is-active,
-    .el-pagination.is-background::v-deep .btn-prev.is-active,
-    .el-pagination.is-background::v-deep .el-pager li.is-active {
-        background-color: #a01c0e;
-        color: #fff;
-    }
-
-
-}
-
+@import '@/assets/css/shop/list.less';
 </style>

pages/xiangcunshangcheng/search/qiugou/list-[id].html.vue

@@ -1,35 +1,36 @@
 <template>
     <ShopPageHead></ShopPageHead>
-    <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
     <main class="index_main" id="all_vue">
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
-        <!--子菜单和地区选择-->
-        <ShopSubMenu></ShopSubMenu>
-
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <ShopSubMenu2></ShopSubMenu2>
         <div class="categ_crumb_box clearfix_2">
-            <!-- 当前位置 -->
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 乡村商城 </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/search/search`"
+                    class="categ_crumb_left_a"
+                >
+                    搜索
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 搜索 </a>
+                <span class="categ_crumb_left_text">求购</span>
             </div>
-            <!-- 当前位置 -->
         </div>
         <!-- 供应信息列表 -->
-        <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
         <div class=" clearfix">
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
                     <a class="categ_head_a" href="" title="">供应信息列表</a>
                     <div class="search_head_text_box">
                         搜索到有关的供应信息：共 
-                        <span class="search_head_text_red">4770 </span>
+                        <span class="search_head_text_red">{{total}}</span>
                         条
                     </div>
                 </div>
@@ -40,132 +41,31 @@
                         <div class="categ_table_td_3">发布时间</div>
                         <div class="categ_table_td_4">地区</div>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
+                    <div class="categ_table_li" v-for="item in pageDataType2">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
                             <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" :alt="item.name">
                             </div>
                             <div class="search_table_td_2 ">
                                 <div class="search_table_td_2_in clearfix">
                                     <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.name }}
                                     </div>
                                     <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.description }}
                                     </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
                                 </div>
                             </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
+                            <div class="categ_table_td_3">{{ getTime(item.created_at, 'year', 1) }}</div>
+                            <div class="categ_table_td_4 dot1">{{ item.city_name }}</div>
+                        </NuxtLink>
                     </div>
                 </div>
             </div>
-
             <!-- 分页器 -->
             <div class="pagination" v-if="total">
                 <el-pagination 
@@ -180,1252 +80,121 @@
                 />
             </div>
         </div>
-        <!-- 点击排行 -->
-        <div class="categ_3_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">点击排行</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_1">
-                <div class="categ_li_img_1" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_1_a" href="" title="">
-                        <img class="categ_li_img_1_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_1_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <!-- 最新商机 -->
-        <div class="categ_5_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新商机</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_2">
-                <div class="categ_li_img_2" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_2_a" href="" title="">
-                        <img class="categ_li_img_2_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_2_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
+        <ShopHotNews></ShopHotNews>
     </main>
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-<script setup>
-import { ref, onMounted } from 'vue'
-import { ElRadio, ElRadioGroup, ElPagination } from 'element-plus'
 
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage,ElPagination } from 'element-plus'
 
 //分页
-let total = ref(50);
-
-
-const radio1 = ref('1')
-// vue选项卡	
-const choice_1_num = ref(1)
-//我要卖
-const alert_1_num = ref(0)
-// 地区选择
-const shop_name_num = ref(1)
-const shop_name_parent = ref(null)
-const shop_name_leng = ref(1)
-//您可以选择以下详细分类：
-const choice_categ_num = ref(1)
-// 您可以选择以下详细地区=btn
-const if_categ_crumb_panel_btn_num = ref(0)
-const if_categ_crumb_panel = ref(false)// 当前商品所在地下拉板
-const if_categ_crumb_panel_click = ref(false)// //判断是否点击在下拉板内
-const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
-    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
-}
-const categ_crumb_panel_btn_blur_fun = () => {// btn失去焦点事件
-    setTimeout(() => {//的延迟器
-        if (if_categ_crumb_panel_click.value == true) {//判断鼠标是否点击下拉panel
-            //点击在下拉panel内
-        } else {//没点击在下拉panel内
-            if_categ_crumb_panel.value = false
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/xiangcunshangcheng/search/gongying/list-${value}.html`)
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.5 获得keyword
+const keyword = ref(route.query.keyword)
+//2.页面路径 end ---------------------------------------->
+
+
+//4.搜索 start ---------------------------------------->
+//4.2 页面展示的数据
+//const pageDataType1 = ref([]);//供应数据
+const pageDataType2 = ref([]);//求购数据 此页面不需要求购数据
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid:346,//栏目id
+        city_id:"",//城市id
+        keyword:keyword,//搜索关键词 
+        page:1,
+        pageSize:10,
+        type_id:2
+    }
+
+    if(keyword.value == undefined || keyword.value == '' || keyword.value == 'NaN'){
+        //删除变量params中的city_id参数
+        delete params.keyword
+    }else{
+        params.keyword = keyword.value
+    }
+
+    if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+        //删除变量params中的city_id参数
+        delete params.city_id
+    }else{
+        params.city_id = parseFloat(cityId.value)
+    }
+
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        pageDataType2.value = pageData.data.type2;
+        total.value = pageData.data.type2_count;
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.搜索 end ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopsearch_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
         }
-    }, 666);
-}
-const categ_crumb_panel_focus_fun = () => {//点击下拉panel
-    if_categ_crumb_panel_click.value = true
-    if_categ_crumb_panel.value = true
-}
-const categ_crumb_panel_blur_fun = () => {// 下拉panel失去焦点事件
-    if_categ_crumb_panel_click.value = false
-    if_categ_crumb_panel.value = false
-}
-
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
 </script>
 
 
-
 <style lang="less" scoped>
-@charset "utf-8";
-
-* {
-    margin: 0;
-    padding: 0;
-    font-family: "微软雅黑", "microsoft yahei";
-}
-
-ul,
-ol {
-    list-style: none;
-}
-
-a:active {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-a:visited {
-    text-decoration: none;
-}
-
-a:link {
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: none;
-}
-
-body {
-    position: relative;
-}
-
-.clearfix {
-    overflow: hidden;
-}
-
-.clearfix_2::after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.hiddenColor {
-    visibility: hidden;
-}
-
-.hand {
-    cursor: pointer;
-}
-
-.aTag_parent {
-    position: relative;
-}
-
-.aTag_parent>a,
-.aTag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 99;
-    border: 0px;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.dot1 {
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dot2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.dot3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-input,
-img {
-    border: none;
-}
-
-.cover100 img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.back100 {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-article,
-aside,
-footer,
-header,
-time,
-video,
-main,
-nav,
-h4,
-h3,
-section {
-    display: block;
-}
-
-.index_main {
-    margin: 0 auto 30px;
-}
-
-.slow_6 {
-    -webkit-transition: all .6s;
-    -moz-transition: all .6s;
-    -ms-transition: all .6s;
-    -o-transition: all .6s;
-    transition: all .6s;
-}
-
-.index_main {
-    width: 1200px;
-}
-
-.shop_head {
-    margin: 30px auto 0px;
-
-    .shop_head_left {
-        float: left;
-        width: 322px;
-        margin-right: 33px;
-    }
-
-    .shop_head_left_a {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_img {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_form_out {
-        width: 550px;
-        float: left;
-    }
-
-    .shop_head_form {
-        margin-top: 37px;
-        display: block;
-        width: 547px;
-        border: solid 1px #A01C0E;
-        height: 40px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-
-    .shop_head_btn {
-        float: right;
-        width: 52px;
-        height: 100%;
-        border: solid 1px #fff;
-        box-sizing: border-box;
-        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
-        background-size: 22px 22px;
-    }
-
-    .shop_head_inp {
-        display: block;
-        text-indent: 11px;
-        height: 40px;
-        line-height: 40px;
-        width: 490px;
-    }
-
-    .shop_head_form_foot {
-        width: 550px;
-        margin-top: 10px;
-    }
-
-    .shop_head_form_foot_a {
-        float: left;
-        height: 18px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-right: 10px;
-    }
-
-    .shop_head_form_foot_a:nth-of-type(1) {
-        color: #A01C0E;
-    }
-
-    .shop_head_form_foot_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_head_right {
-        float: right;
-        margin-top: 37px;
-        position: relative;
-    }
-
-    .shop_head_right_btn {
-        float: right;
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        color: #666;
-        font-size: 14px;
-        margin-left: 10px;
-        text-indent: 52px;
-        border: 1px solid #E9E9E9;
-        background: no-repeat 20px center #F4F4F4;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1) {
-        background-image: url(@/public/img/4.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2) {
-        background-image: url(@/public/img/5.png);
-    }
-
-    .shop_head_right_btn:hover {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1):hover {
-        background-image: url(@/public/img/4a.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2):hover {
-        background-image: url(@/public/img/5a.png);
-    }
-
-    .shop_head_right_btn_1_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/4a.png) !important;
-    }
-
-    .shop_head_right_btn_2_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/5a.png) !important;
-    }
-
-    .shop_head_right_btn:hover .shop_head_right_out {
-        display: block;
-    }
-
-    .shop_head_right_box {
-        background: #fff;
-        height: 1111px;
-        margin-top: 20px;
-    }
-
-    .shop_alert_out {
-        position: absolute;
-        width: 1036px;
-        right: 0px;
-        top: 99%;
-        z-index: 111;
-    }
-
-    .shop_alert_box {
-        background: #fff;
-        box-sizing: border-box;
-        padding: 0px 20px;
-        border: solid 1px #A01C0E;
-        width: 100%;
-        margin-top: 20px;
-    }
-
-    .shop_alert_head_box {}
-
-    .shop_alert_head_name_1 {
-        float: left;
-        font-weight: bold;
-        color: #A01C0E;
-        font-size: 20px;
-        margin-top: 30px;
-        letter-spacing: 1px;
-    }
-
-    .shop_alert_head_name_2 {
-        float: left;
-        color: #333;
-        font-size: 16px;
-        margin: 35px 0px 0px 10px;
-        position: relative;
-        padding-left: 22px;
-        font-weight: bold;
-    }
-
-    .shop_alert_head_name_2::after {
-        content: '';
-        display: block;
-        width: 14px;
-        height: 10px;
-        position: absolute;
-        left: 0px;
-        bottom: 3px;
-        background: url(@/public/img/16.png) no-repeat left 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_head_btn_a {
-        float: right;
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        font-size: 14px;
-        padding: 0px 20px 0px 36px;
-        margin-top: 23px;
-        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
-        background-size: 14px auto;
-    }
-
-    .shop_alert_ul {
-        margin: 28px auto 0px;
-        width: 980px;
-    }
-
-    .shop_alert_li {
-        margin-bottom: 11px;
-        display: flex;
-    }
-
-    .shop_alert_li_label {
-        width: 150px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 24px;
-        font-weight: bold;
-        position: relative;
-        box-sizing: border-box;
-        margin-right: 20px;
-    }
-
-    .shop_alert_li_label::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 22px;
-        height: 22px;
-        background: url(@/public/img/15.png) no-repeat right 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_li_panel {}
-
-    .shop_alert_li_panel_a {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        margin: 0px 25px 10px 0px;
-    }
-
-    .shop_alert_li_panel_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_alert_1_index {
-        margin-top: 20px;
-    }
-
-    .shop_alert_img_ul {
-        margin-top: 30px;
-    }
-
-    .shop_alert_img_li {
-        float: left;
-        width: 314px;
-        margin: 0px 26px 30px 0px;
-        box-sizing: border-box;
-    }
-
-    .shop_alert_img_li_a {
-        display: block;
-        width: 100%;
-    }
-
-    .shop_alert_img_li_img {
-        width: 130px;
-        height: 130px;
-        margin-right: 10px;
-        float: left;
-    }
-
-    .shop_alert_img_li_right {
-        width: 173px;
-        float: right;
-    }
-
-    .shop_alert_img_li_h4 {
-        height: 18px;
-        line-height: 18px;
-        color: #333;
-        font-size: 14px;
-        font-weight: bold;
-        margin-top: 7px;
-    }
-
-    .shop_alert_img_li_dot3 {
-        height: 48px;
-        line-height: 16px;
-        color: #666;
-        font-size: 12px;
-        margin-top: 13px;
-    }
-
-    .shop_alert_img_li_time {
-        float: left;
-        height: 26px;
-        line-height: 26px;
-        color: rgba(51, 51, 51, 0.4);
-        font-size: 12px;
-        margin-top: 18px;
-        background: #f7f7f7;
-        padding: 0px 4px;
-    }
-
-    .shop_alert_img_li:nth-of-type(3n) {
-        margin-right: 0;
-    }
-
-    .shop_alert_img_li_a:hover * {
-        color: #A01C0E;
-    }
-}
-
-.shop_banner {
-    width: 1200px;
-    overflow: hidden;
-    margin: 20px auto 0px;
-
-    .shop_banner_a {
-        display: block;
-        width: 1200px;
-        height: 90px;
-    }
-
-    .shop_banner_img {
-        display: block;
-        width: 1200px;
-    }
-}
-
-.shop_nav {
-    border: solid 1px #E9E9E9;
-    background: #fafafa;
-    margin-top: 20px;
-}
-
-.shop_nav_head {
-    float: left;
-    height: 28px;
-    width: 138px;
-    margin: 30px 52px 0px 25px;
-
-    .shop_nav_head_a {
-        display: block;
-        height: 28px;
-        width: 138px;
-        background: url(@/public/img/7.png) no-repeat left top;
-        background-size: 100% 100%;
-    }
-}
-
-.shop_nav_in {
-    float: left;
-
-    .shop_nav_in_a {
-        float: left;
-        height: 75px;
-        line-height: 75px;
-        color: #333;
-        font-size: 16px;
-        background: #f8f5f5;
-        width: 118px;
-        border-bottom: solid 5px #A01C0E;
-        font-weight: bold;
-        margin: 5px 0;
-        text-align: center;
-    }
-
-    .shop_nav_in_a:nth-of-type(4) {
-        margin-right: 8px;
-    }
-
-    .shop_nav_in_a:hover {
-        color: #A01C0E;
-    }
-}
-
-.shop_name_in {
-    float: left;
-    height: 40px;
-    width: 1046px;
-    float: left;
-    box-sizing: border-box;
-
-    .shop_name_a {
-        float: left;
-        height: 27px;
-        line-height: 27px;
-        color: #222;
-        font-size: 20px;
-        position: relative;
-        margin: 7px 14.5px 0;
-        padding: 0px 10px;
-    }
-
-    .shop_name_a::after {
-        content: '/';
-        display: block;
-        position: absolute;
-        top: 0px;
-        right: -18px;
-        height: 100%;
-        line-height: 27px;
-        color: #E9E9E9;
-        font-size: 20px;
-    }
-
-    .shop_name_a:nth-last-of-type(1)::after {
-        content: '';
-        display: none;
-    }
-
-    .shop_name_a_only {
-        background: #A01C0E;
-        color: #fff;
-    }
-}
-
-.shop_name_out {
-    margin-top: 20px;
-}
-
-.shop_name_box {
-    border-top: solid 1px #fff;
-}
-
-.shop_name_box_a {
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.shop_name {
-    float: left;
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    position: relative;
-    z-index: 11;
-    text-align: center;
-    font-size: 20px;
-    background: #A01C0E;
-    padding: 0px 14px;
-}
-
-.shop_name_right {
-    height: 40px;
-    border-bottom: 1px solid #E8E9EC;
-    margin-top: 4px;
-    background: #F8F8F8;
-    position: relative;
-    z-index: 2;
-}
-
-.shop_name_right::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    width: 16px;
-    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
-    background-size: 100% auto;
-}
-
-.shop_name_btn {
-    width: 24px;
-    height: 24px;
-    float: right;
-    margin: 10px 22px 0px 0px;
-    background: url(@/public/img/8.png) no-repeat center center;
-    border-radius: 50%;
-    background-size: 100% 100%;
-}
-
-.shop_2_left {
-    float: left;
-    width: 900px;
-}
-
-.shop_3_right {
-    float: right;
-    width: 280px;
-}
-
-.shop_1_box {
-    margin: 30px auto 0px;
-}
-
-.shop_2_box {
-    margin: 30px auto 0px;
-}
-
-.shop_3_box {
-    margin: 0px auto 0px;
-}
-
-.shop_4_box {
-    margin: 4px auto 0px;
-}
-
-.shop_5_box {
-    margin: 4px auto 0px;
-}
-
-.categ_crumb_box {
-    margin-top: 20px;
-    border-bottom: solid 1px #D9D9D9;
-    padding-bottom: 20px;
-    position: relative;
-}
-
-.categ_crumb_left {
-    float: left;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-
-    .categ_crumb_left_a {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #999;
-        font-size: 16px;
-    }
-
-    .categ_crumb_left_text {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-}
-
-.categ_crumb_right {
-    float: right;
-
-    .categ_crumb_right_text {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-
-    .categ_crumb_right_btn {
-        float: left;
-        width: 14px;
-        height: 14px;
-        background-image: url(@/public/img/17.png);
-        margin: 5px 0px 0px 5px;
-    }
-}
-
-.categ_crumb_panel {
-    position: absolute;
-    border: solid 1px #A01C0E;
-    padding: 0px 30px 10px;
-    background: #fff;
-    right: 0px;
-    top: 0px;
-    box-sizing: border-box;
-    width: 658px;
-    top: 100%;
-
-    .categ_crumb_panel_h4 {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 31px;
-        margin-top: 20px;
-        background: url(@/public/img/15.png) no-repeat right center;
-        background-size: 21px 21px;
-    }
-
-    .categ_crumb_panel_btn_box {
-        margin-top: 20px;
-    }
-
-    .categ_crumb_panel_btn {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        font-weight: bold;
-        margin: 0px 26.5px 11px 0px;
-    }
-
-    .categ_crumb_panel_btn:hover {
-        color: #A01C0E;
-    }
-
-    .categ_crumb_panel_btn_only {
-        color: #A01C0E;
-    }
-}
-
-.categ_grey_box {
-    box-sizing: border-box;
-    border: solid 1px #E9E9E9;
-    background: #F8F8F8;
-    padding: 0px 20px 8px;
-    width: 100%;
-    margin-top: 15px;
-
-    .categ_grey_head {
-        height: 48px;
-        line-height: 50px;
-        color: #000;
-        font-size: 18px;
-        border-bottom: dashed 1px #E9E9E9;
-    }
-
-    .categ_grey_ul {
-        margin: 10px 0px 0px -10px;
-    }
-
-    .categ_grey_btn {
-        float: left;
-        line-height: 29px;
-        height: 29px;
-        color: #333;
-        font-size: 16px;
-        margin: 0px 10px 7px;
-    }
-
-    .categ_grey_btn_only {
-        background: #A01C0E;
-        color: #fff;
-        padding: 0px 5px 0px;
-        margin: 0px 5px 7px;
-    }
-}
-
-.categ_head_box {
-    border-bottom: solid 1px #E9E9E9;
-    padding-bottom: 22px;
-    margin-top: 20px;
-    border-top: solid 1px rgba(0, 0, 0, 0);
-
-    .categ_head_a {
-        float: left;
-        text-indent: 15px;
-        font-size: 20px;
-        color: #333;
-        border-left: solid 3px #A01C0E;
-        height: 18px;
-        line-height: 18px;
-    }
-
-    .categ_head_a_more {
-        float: right;
-        color: #999;
-        font-size: 14px;
-        margin-top: 0px;
-    }
-}
-
-.categ_table {}
-
-.categ_table_head_box {
-    height: 61px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_head_box>.categ_table_td_1 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_2 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_3 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_4 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_td_1 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 155px;
-    margin-right: 126px;
-}
-
-.categ_table_td_2 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 480px;
-    margin-right: 124px;
-}
-
-.categ_table_td_3 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 120px;
-    margin-right: 62px;
-}
-
-.categ_table_td_4 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 133px;
-}
-
-/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
-.categ_table_li {
-    height: 161px;
-    box-sizing: border-box;
-    padding: 15px 0px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_td_1_img {
-    display: block;
-    width: 130px;
-    height: 130px;
-    margin: 0px auto;
-}
-
-.categ_table_li .categ_table_td_1 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_2 {
-    line-height: 160px;
-    line-height: 160px;
-    font-weight: bold;
-    color: #333;
-}
-
-.categ_table_li .categ_table_td_3 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_4 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_3_index {
-    margin-top: 28px;
-}
-
-.categ_ul_img_1 {
-    margin-top: 20px;
-}
-
-.categ_li_img_1 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_1_a {}
-
-.categ_li_img_1_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_1_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_1:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_1_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_1:hover .categ_li_img_1_dot2 {
-    color: #A01C0E;
-}
-
-.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/18.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/19.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/20.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_ul_img_2 {
-    margin-top: 20px;
-}
-
-.categ_li_img_2 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_2_a {}
-
-.categ_li_img_2_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_2_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_2:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_2_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_2:hover .categ_li_img_2_dot2 {
-    color: #A01C0E;
-}
-
-/*乡村网-商城-搜索-查看更多*/
-.search_head_text_box {
-    height: 18px;
-    line-height: 18px;
-    color: #333;
-    font-size: 16px;
-    float: left;
-    margin-left: 20px;
-}
-
-.search_head_text_red {
-    color: #A01C0E;
-}
-
-.search_table_td_2 {
-    float: left;
-    height: 100%;
-    width: 480px;
-    margin-right: 124px;
-
-    .search_table_td_2_head {
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        font-weight: bold;
-        width: 480px;
-    }
-
-    .search_table_td_2_dot2 {
-        max-height: 36px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-top: 5px;
-        width: 480px;
-    }
-
-    .search_table_td_2_in {
-        height: 129px;
-        width: 480px;
-        display: table-cell;
-        vertical-align: middle;
-    }
-}
-
-@media screen and (min-width:1200px) {
-    /*pc_1440*/
-    @media screen and (max-width:1440px) {
-        /*1200*/
-    }
-
-    .pc_none {
-        display: none;
-    }
-}
-
-@media screen and (max-width:599px) {}
-
-@media screen and (max-width:320px) {}
-
-
-
-.pagination {
-    margin: 40px auto 30px auto;
-    height: 34px;
-    margin-left: 141px;
-    display: flex;
-    justify-content: center;
-
-    // 鼠标移入后字体颜色
-    .el-pagination::v-deep :hover {
-        color: #a01c0e;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next,
-    .el-pagination.is-background::v-deep .btn-prev {
-        width: 70px;
-        height: 34px;
-        margin: 0px 10px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .el-pager li {
-        margin: 0px 10px;
-        width: 38px;
-        height: 34px;
-        border-radius: 4px;
-    }
-
-    .el-pagination.is-background::v-deep .btn-next.is-active,
-    .el-pagination.is-background::v-deep .btn-prev.is-active,
-    .el-pagination.is-background::v-deep .el-pager li.is-active {
-        background-color: #a01c0e;
-        color: #fff;
-    }
-
-
-}
-
+@import '@/assets/css/shop/list.less';
 </style>

pages/xiangcunshangcheng/search/search.vue

@@ -1,45 +1,38 @@
 <template>
     <ShopPageHead></ShopPageHead>
-    <!-- xc_shop_search_more_no_card  乡村网-商城-搜索-查看更多 -->
     <main class="index_main" id="all_vue">
-        <div class="shop_banner">
-            <a class="shop_banner_a" href="" title="">
-                <img class="shop_banner_img" src="@/public/img/6.png" title="" alt="">
-            </a>
-        </div>
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
         <!--子菜单和地区选择-->
-        <ShopSubMenu></ShopSubMenu>
-        
+        <ShopSubMenu2></ShopSubMenu2>
         <!-- 地区选择 -->
         <div class="categ_crumb_box clearfix_2">
             <!-- 当前位置 -->
             <div class="categ_crumb_left">
-                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
-                &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 乡村商城 </a>
+                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </NuxtLink>
                 &gt;
-                <a class="categ_crumb_left_a" href="" title=""> 搜索 </a>
+                <span class="categ_crumb_left_text">搜索</span>
             </div>
-            <!-- 当前位置 -->
         </div>
         <!-- 供应信息列表 -->
         <!-- <div class=" clearfix" v-show="choice_categ_num == 1"> -->
-        <div class="clearfix">
+        <div class=" clearfix">
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
-                    <a class="categ_head_a" href="" title="">供应信息列表</a>
+                    <span class="categ_head_a">供应信息列表</span>
                     <div class="search_head_text_box">
                         搜索到有关的供应信息：共 
-                        <span class="search_head_text_red">4770 </span>
+                        <span class="search_head_text_red">{{pageDataType1Total}}</span>
                         条
                     </div>
-                    <!-- <a class="categ_head_a_more" href="" title=""></a> -->
-                    <nuxt-link 
-                        to="/xiangcunshangcheng/search/gongying/list-1.html"
-                        class="categ_head_a_more"
-                    >
-                        查看更多 &gt; 
-                    </nuxt-link>
+                    <span class="categ_head_a_more" @click="pageShopList(1)" v-if="pageDataType1.length != 0">
+                        查看更多 &gt;
+                    </span>
                 </div>
                 <div class="categ_table clearfix">
                     <div class="categ_table_head_box">
@@ -48,80 +41,45 @@
                         <div class="categ_table_td_3">发布时间</div>
                         <div class="categ_table_td_4">地区</div>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
+                    <ShopNoData v-if="pageDataType1.length == 0" :pagetype="'class'"></ShopNoData>
+                    <div class="categ_table_li" v-for="item in pageDataType1" :key="item.id">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
                             <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" alt="item.name">
                             </div>
                             <div class="search_table_td_2 ">
                                 <div class="search_table_td_2_in clearfix">
                                     <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.name }}
                                     </div>
                                     <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.description }}
                                     </div>
                                 </div>
                             </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
+                            <div class="categ_table_td_3">{{getTime(item.created_at, 'year', 1)}}</div>
+                            <div class="categ_table_td_4 dot1">{{item.city_name}}</div>
+                        </NuxtLink>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="clearfix">
+        <div class=" clearfix">
             <div class="categ_1_index clearfix">
                 <div class="categ_head_box clearfix_2">
-                    <a class="categ_head_a" href="" title="">求购信息列表</a>
+                    <span class="categ_head_a">求购信息列表</span>
                     <div class="search_head_text_box">
-                        搜索到有关的供应信息：共 
-                        <span class="search_head_text_red">4770 </span>
+                        搜索到有关的求购信息：共 
+                        <span class="search_head_text_red">{{pageDataType2Total}}</span>
                         条
                     </div>
-                    <!-- <a class="categ_head_a_more" href="" title=""></a> -->
-                    <nuxt-link 
-                        to="/xiangcunshangcheng/search/qiugou/list-1.html"
-                        class="categ_head_a_more"
-                    >
-                        查看更多 &gt; 
-                    </nuxt-link>
+                    <span class="categ_head_a_more" @click="pageShopList(2)" v-if="pageDataType2.length != 0">
+                        查看更多 &gt;
+                    </span>
                 </div>
                 <div class="categ_table clearfix">
                     <div class="categ_table_head_box">
@@ -130,1255 +88,160 @@
                         <div class="categ_table_td_3">发布时间</div>
                         <div class="categ_table_td_4">地区</div>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
+                    <ShopNoData v-if="pageDataType2.length == 0" :pagetype="'class'"></ShopNoData>
+                    <div class="categ_table_li" v-for="item in pageDataType2" :key="item.id">
+                        <NuxtLink
+                            :to="getShopPathDetail1(item)"
+                            class="categ_table_li_a"
+                            :title="item.name"
+                        >
                             <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
+                                <img class="categ_table_td_1_img" :src="item.imgurl" alt="item.name">
                             </div>
                             <div class="search_table_td_2 ">
                                 <div class="search_table_td_2_in clearfix">
                                     <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.name }}
                                     </div>
                                     <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
+                                        {{ item.description }}
                                     </div>
                                 </div>
                             </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
+                            <div class="categ_table_td_3">{{getTime(item.created_at, 'year', 1)}}</div>
+                            <div class="categ_table_td_4 dot1">{{item.city_name}}</div>
+                        </NuxtLink>
                     </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                    <div class="categ_table_li">
-                        <a class="categ_table_li_a" href="" title="">
-                            <div class="categ_table_td_1">
-                                <img class="categ_table_td_1_img" src="@/public/img/10.png" title="" alt="">
-                            </div>
-                            <div class="search_table_td_2 ">
-                                <div class="search_table_td_2_in clearfix">
-                                    <div class="search_table_td_2_head dot1">
-                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求5个小时
-                                    </div>
-                                    <div class="search_table_td_2_dot2 dot2">供求信息/公司供求信息</div>
-                                </div>
-                            </div>
-                            <div class="categ_table_td_3">2222-22-22</div>
-                            <div class="categ_table_td_4 dot1">地区地区地区地区1111</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <div class="categ_3_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">点击排行</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_1">
-                <div class="categ_li_img_1" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_1_a" href="" title="">
-                        <img class="categ_li_img_1_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_1_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <!-- 点击排行 -->
-        <!-- 最新商机 -->
-        <div class="categ_5_index clearfix">
-            <div class="shop_name_box">
-                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新商机</a></div>
-                <div class="shop_name_right"></div>
-            </div>
-            <div class="categ_ul_img_2">
-                <div class="categ_li_img_2" v-for="(per_obj, per_index) in 10" :key="per_obj">
-                    <a class="categ_li_img_2_a" href="" title="">
-                        <img class="categ_li_img_2_img" src="@/public/img/10.png" title="" alt="">
-                        <div class="categ_li_img_2_dot2 dot2">
-                            5为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选为你精选
-                        </div>
-                    </a>
                 </div>
             </div>
         </div>
+        <ShopHotNews></ShopHotNews>
     </main>
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
-import { ElRadio, ElRadioGroup } from 'element-plus'
-
-
-//您可以选择以下详细分类：
-const choice_categ_num = ref(1)
-// 您可以选择以下详细地区=btn
-const if_categ_crumb_panel_btn_num = ref(0)
-const if_categ_crumb_panel = ref(false)// 当前商品所在地下拉板
-const if_categ_crumb_panel_click = ref(false)// //判断是否点击在下拉板内
-const btn_if_categ_crumb_panel_fun = () => {//点击下拉btn
-    if_categ_crumb_panel.value = !if_categ_crumb_panel.value
-}
-const categ_crumb_panel_btn_blur_fun = () => {// btn失去焦点事件
-    setTimeout(() => {//的延迟器
-        if (if_categ_crumb_panel_click.value == true) {//判断鼠标是否点击下拉panel
-            //点击在下拉panel内
-        } else {//没点击在下拉panel内
-            if_categ_crumb_panel.value = false
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted,watch } from 'vue'
+import { ElMessage } from 'element-plus'
+//1.页面必备方法 end ---------------------------------------->
+
+//2.页面路径 start ---------------------------------------->
+//2.1 获得页面数据id
+const route = useRoute();
+const router = useRouter()
+//2.4 获得cityid
+const cityId = ref(route.query.cityid)
+//2.5 获得keyword
+const keyword = ref(route.query.keyword)
+//2.页面路径 end ---------------------------------------->
+
+
+//4.搜索 start ---------------------------------------->
+//4.2 页面展示的数据
+const pageDataType1 = ref([]);//供应数据
+const pageDataType2 = ref([]);//求购数据
+const pageDataType1Total = ref(0);//供应总条数
+const pageDataType2Total = ref(0);//求购总条数
+
+//4.3 发起搜索
+const pageSearch = async () => {
+    let params = {
+        catid: 346,
+        city_id:"",//城市id
+        keyword:keyword.value,//搜索关键词
+        page:1,
+        pageSize:3,
+    }
+
+    if(cityId.value == undefined || cityId.value == '' || cityId.value == 'NaN'){
+        //删除变量params中的city_id参数
+        delete params.city_id
+    }else{
+        params.city_id = parseFloat(cityId.value)
+    }
+
+    const pageData = await requestDataPromise('/web/getWebsiteshopList', {
+        method: 'GET',
+        query: params,
+    });
+
+    if (pageData.code == 200) {
+        pageDataType1.value = pageData.data.type1;
+        pageDataType2.value = pageData.data.type2;
+        pageDataType1Total.value = pageData.data.type1_count;
+        pageDataType2Total.value = pageData.data.type2_count;
+
+    } else {
+        console.log("错误位置：获得该页面数据失败！")
+    }
+    //开始请求数据
+    console.log(params)
+    console.log(pageData)
+}
+//页面初始化的时候调用一下搜索
+pageSearch();
+
+//4.4 每次路由一变化就重新请求数据
+//4.4.1 监听cityid
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+//4.搜索 end ---------------------------------------->
+
+//5.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopsearch_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
         }
-    }, 666);
-}
-const categ_crumb_panel_focus_fun = () => {//点击下拉panel
-    if_categ_crumb_panel_click.value = true
-    if_categ_crumb_panel.value = true
-}
-const categ_crumb_panel_blur_fun = () => {// 下拉panel失去焦点事件
-    if_categ_crumb_panel_click.value = false
-    if_categ_crumb_panel.value = false
-}
-
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//5.广告 end ---------------------------------------->
+
+//6.跳转到列表页 start ---------------------------------------->
+const pageShopList = (type) => {
+    const { keyword, cityid } = route.query
+
+    const queryParams = {
+        ...(keyword && { keyword }),
+        ...(cityid && { cityid })
+    }
+
+    if(type == 1){
+        //type==1 跳转到供应列表页
+        const targetPath = `/xiangcunshangcheng/search/gongying/list-1.html`
+        router.push({
+            path: targetPath,
+            query: queryParams
+        })
+    }else{
+        //type==2 跳转到求购列表页
+        const targetPath = `/xiangcunshangcheng/search/qiugou/list-1.html`
+        router.push({
+            path: targetPath,
+            query: queryParams
+        })
+    }
+}
+//6.跳转到列表页 end ---------------------------------------->
 </script>
 
 <style lang="less" scoped>
-@charset "utf-8";
-
-* {
-    margin: 0;
-    padding: 0;
-    font-family: "微软雅黑", "microsoft yahei";
-}
-
-ul,
-ol {
-    list-style: none;
-}
-
-a:active {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-a:visited {
-    text-decoration: none;
-}
-
-a:link {
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: none;
-}
-
-body {
-    position: relative;
-}
-
-.clearfix {
-    overflow: hidden;
-}
-
-.clearfix_2::after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.hiddenColor {
-    visibility: hidden;
-}
-
-.hand {
-    cursor: pointer;
-}
-
-.aTag_parent {
-    position: relative;
-}
-
-.aTag_parent>a,
-.aTag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 99;
-    border: 0px;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.dot1 {
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dot2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.dot3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-}
-
-input,
-img {
-    border: none;
-}
-
-.cover100 img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.back100 {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-article,
-aside,
-footer,
-header,
-time,
-video,
-main,
-nav,
-h4,
-h3,
-section {
-    display: block;
-}
-
-.index_main {
-    margin: 0 auto 30px;
-}
-
-.slow_6 {
-    -webkit-transition: all .6s;
-    -moz-transition: all .6s;
-    -ms-transition: all .6s;
-    -o-transition: all .6s;
-    transition: all .6s;
-}
-
-.index_main {
-    width: 1200px;
-}
-
-.shop_head {
-    margin: 30px auto 0px;
-
-    .shop_head_left {
-        float: left;
-        width: 322px;
-        margin-right: 33px;
-    }
-
-    .shop_head_left_a {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_img {
-        width: 322px;
-        display: block;
-    }
-
-    .shop_head_form_out {
-        width: 550px;
-        float: left;
-    }
-
-    .shop_head_form {
-        margin-top: 37px;
-        display: block;
-        width: 547px;
-        border: solid 1px #A01C0E;
-        height: 40px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-
-    .shop_head_btn {
-        float: right;
-        width: 52px;
-        height: 100%;
-        border: solid 1px #fff;
-        box-sizing: border-box;
-        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
-        background-size: 22px 22px;
-    }
-
-    .shop_head_inp {
-        display: block;
-        text-indent: 11px;
-        height: 40px;
-        line-height: 40px;
-        width: 490px;
-    }
-
-    .shop_head_form_foot {
-        width: 550px;
-        margin-top: 10px;
-    }
-
-    .shop_head_form_foot_a {
-        float: left;
-        height: 18px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-right: 10px;
-    }
-
-    .shop_head_form_foot_a:nth-of-type(1) {
-        color: #A01C0E;
-    }
-
-    .shop_head_form_foot_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_head_right {
-        float: right;
-        margin-top: 37px;
-        position: relative;
-    }
-
-    .shop_head_right_btn {
-        float: right;
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        color: #666;
-        font-size: 14px;
-        margin-left: 10px;
-        text-indent: 52px;
-        border: 1px solid #E9E9E9;
-        background: no-repeat 20px center #F4F4F4;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1) {
-        background-image: url(@/public/img/4.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2) {
-        background-image: url(@/public/img/5.png);
-    }
-
-    .shop_head_right_btn:hover {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-    }
-
-    .shop_head_right_btn:nth-of-type(1):hover {
-        background-image: url(@/public/img/4a.png);
-    }
-
-    .shop_head_right_btn:nth-of-type(2):hover {
-        background-image: url(@/public/img/5a.png);
-    }
-
-    .shop_head_right_btn_1_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/4a.png) !important;
-    }
-
-    .shop_head_right_btn_2_only {
-        color: #fff;
-        background: no-repeat 20px center #A01C0E;
-        background-size: 24px 24px;
-        background-image: url(@/public/img/5a.png) !important;
-    }
-
-    .shop_head_right_btn:hover .shop_head_right_out {
-        display: block;
-    }
-
-    .shop_head_right_box {
-        background: #fff;
-        height: 1111px;
-        margin-top: 20px;
-    }
-
-    .shop_alert_out {
-        position: absolute;
-        width: 1036px;
-        right: 0px;
-        top: 99%;
-        z-index: 111;
-    }
-
-    .shop_alert_box {
-        background: #fff;
-        box-sizing: border-box;
-        padding: 0px 20px;
-        border: solid 1px #A01C0E;
-        width: 100%;
-        margin-top: 20px;
-    }
-
-    .shop_alert_head_box {}
-
-    .shop_alert_head_name_1 {
-        float: left;
-        font-weight: bold;
-        color: #A01C0E;
-        font-size: 20px;
-        margin-top: 30px;
-        letter-spacing: 1px;
-    }
-
-    .shop_alert_head_name_2 {
-        float: left;
-        color: #333;
-        font-size: 16px;
-        margin: 35px 0px 0px 10px;
-        position: relative;
-        padding-left: 22px;
-        font-weight: bold;
-    }
-
-    .shop_alert_head_name_2::after {
-        content: '';
-        display: block;
-        width: 14px;
-        height: 10px;
-        position: absolute;
-        left: 0px;
-        bottom: 3px;
-        background: url(@/public/img/16.png) no-repeat left 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_head_btn_a {
-        float: right;
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        font-size: 14px;
-        padding: 0px 20px 0px 36px;
-        margin-top: 23px;
-        background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
-        background-size: 14px auto;
-    }
-
-    .shop_alert_ul {
-        margin: 28px auto 0px;
-        width: 980px;
-    }
-
-    .shop_alert_li {
-        margin-bottom: 11px;
-        display: flex;
-    }
-
-    .shop_alert_li_label {
-        width: 150px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 24px;
-        font-weight: bold;
-        position: relative;
-        box-sizing: border-box;
-        margin-right: 20px;
-    }
-
-    .shop_alert_li_label::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 22px;
-        height: 22px;
-        background: url(@/public/img/15.png) no-repeat right 0px;
-        background-size: 100% 100%;
-    }
-
-    .shop_alert_li_panel {}
-
-    .shop_alert_li_panel_a {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        margin: 0px 25px 10px 0px;
-    }
-
-    .shop_alert_li_panel_a:hover {
-        color: #A01C0E;
-    }
-
-    .shop_alert_1_index {
-        margin-top: 20px;
-    }
-
-    .shop_alert_img_ul {
-        margin-top: 30px;
-    }
-
-    .shop_alert_img_li {
-        float: left;
-        width: 314px;
-        margin: 0px 26px 30px 0px;
-        box-sizing: border-box;
-    }
-
-    .shop_alert_img_li_a {
-        display: block;
-        width: 100%;
-    }
-
-    .shop_alert_img_li_img {
-        width: 130px;
-        height: 130px;
-        margin-right: 10px;
-        float: left;
-    }
-
-    .shop_alert_img_li_right {
-        width: 173px;
-        float: right;
-    }
-
-    .shop_alert_img_li_h4 {
-        height: 18px;
-        line-height: 18px;
-        color: #333;
-        font-size: 14px;
-        font-weight: bold;
-        margin-top: 7px;
-    }
-
-    .shop_alert_img_li_dot3 {
-        height: 48px;
-        line-height: 16px;
-        color: #666;
-        font-size: 12px;
-        margin-top: 13px;
-    }
-
-    .shop_alert_img_li_time {
-        float: left;
-        height: 26px;
-        line-height: 26px;
-        color: rgba(51, 51, 51, 0.4);
-        font-size: 12px;
-        margin-top: 18px;
-        background: #f7f7f7;
-        padding: 0px 4px;
-    }
-
-    .shop_alert_img_li:nth-of-type(3n) {
-        margin-right: 0;
-    }
-
-    .shop_alert_img_li_a:hover * {
-        color: #A01C0E;
-    }
-}
-
-.shop_banner {
-    width: 1200px;
-    overflow: hidden;
-    margin: 20px auto 0px;
-
-    .shop_banner_a {
-        display: block;
-        width: 1200px;
-        height: 90px;
-    }
-
-    .shop_banner_img {
-        display: block;
-        width: 1200px;
-    }
-}
-
-.shop_nav {
-    border: solid 1px #E9E9E9;
-    background: #fafafa;
-    margin-top: 20px;
-}
-
-.shop_nav_head {
-    float: left;
-    height: 28px;
-    width: 138px;
-    margin: 30px 52px 0px 25px;
-
-    .shop_nav_head_a {
-        display: block;
-        height: 28px;
-        width: 138px;
-        background: url(@/public/img/7.png) no-repeat left top;
-        background-size: 100% 100%;
-    }
-}
-
-.shop_nav_in {
-    float: left;
-
-    .shop_nav_in_a {
-        float: left;
-        height: 75px;
-        line-height: 75px;
-        color: #333;
-        font-size: 16px;
-        background: #f8f5f5;
-        width: 118px;
-        border-bottom: solid 5px #A01C0E;
-        font-weight: bold;
-        margin: 5px 0;
-        text-align: center;
-    }
-
-    .shop_nav_in_a:nth-of-type(4) {
-        margin-right: 8px;
-    }
-
-    .shop_nav_in_a:hover {
-        color: #A01C0E;
-    }
-}
-
-.shop_name_in {
-    float: left;
-    height: 40px;
-    width: 1046px;
-    float: left;
-    box-sizing: border-box;
-
-    .shop_name_a {
-        float: left;
-        height: 27px;
-        line-height: 27px;
-        color: #222;
-        font-size: 20px;
-        position: relative;
-        margin: 7px 14.5px 0;
-        padding: 0px 10px;
-    }
-
-    .shop_name_a::after {
-        content: '/';
-        display: block;
-        position: absolute;
-        top: 0px;
-        right: -18px;
-        height: 100%;
-        line-height: 27px;
-        color: #E9E9E9;
-        font-size: 20px;
-    }
-
-    .shop_name_a:nth-last-of-type(1)::after {
-        content: '';
-        display: none;
-    }
-
-    .shop_name_a_only {
-        background: #A01C0E;
-        color: #fff;
-    }
-}
-
-.shop_name_out {
-    margin-top: 20px;
-}
-
-.shop_name_box {
-    border-top: solid 1px #fff;
-}
-
-.shop_name_box_a {
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.shop_name {
-    float: left;
-    height: 44px;
-    line-height: 44px;
-    color: #fff;
-    font-weight: bold;
-    position: relative;
-    z-index: 11;
-    text-align: center;
-    font-size: 20px;
-    background: #A01C0E;
-    padding: 0px 14px;
-}
-
-.shop_name_right {
-    height: 40px;
-    border-bottom: 1px solid #E8E9EC;
-    margin-top: 4px;
-    background: #F8F8F8;
-    position: relative;
-    z-index: 2;
-}
-
-.shop_name_right::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    width: 16px;
-    background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
-    background-size: 100% auto;
-}
-
-.shop_name_btn {
-    width: 24px;
-    height: 24px;
-    float: right;
-    margin: 10px 22px 0px 0px;
-    background: url(@/public/img/8.png) no-repeat center center;
-    border-radius: 50%;
-    background-size: 100% 100%;
-}
-
-.shop_2_left {
-    float: left;
-    width: 900px;
-}
-
-.shop_3_right {
-    float: right;
-    width: 280px;
-}
-
-.shop_1_box {
-    margin: 30px auto 0px;
-}
-
-.shop_2_box {
-    margin: 30px auto 0px;
-}
-
-.shop_3_box {
-    margin: 0px auto 0px;
-}
-
-.shop_4_box {
-    margin: 4px auto 0px;
-}
-
-.shop_5_box {
-    margin: 4px auto 0px;
-}
-
-.categ_crumb_box {
-    margin-top: 20px;
-    border-bottom: solid 1px #D9D9D9;
-    padding-bottom: 20px;
-    position: relative;
-}
-
-.categ_crumb_left {
-    float: left;
-    height: 21px;
-    line-height: 21px;
-    color: #999;
-    font-size: 16px;
-
-    .categ_crumb_left_a {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #999;
-        font-size: 16px;
-    }
-
-    .categ_crumb_left_text {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-}
-
-.categ_crumb_right {
-    float: right;
-
-    .categ_crumb_right_text {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-    }
-
-    .categ_crumb_right_btn {
-        float: left;
-        width: 14px;
-        height: 14px;
-        background-image: url(@/public/img/17.png);
-        margin: 5px 0px 0px 5px;
-    }
-}
-
-.categ_crumb_panel {
-    position: absolute;
-    border: solid 1px #A01C0E;
-    padding: 0px 30px 10px;
-    background: #fff;
-    right: 0px;
-    top: 0px;
-    box-sizing: border-box;
-    width: 658px;
-    top: 100%;
-
-    .categ_crumb_panel_h4 {
-        display: inline-block;
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        padding-right: 31px;
-        margin-top: 20px;
-        background: url(@/public/img/15.png) no-repeat right center;
-        background-size: 21px 21px;
-    }
-
-    .categ_crumb_panel_btn_box {
-        margin-top: 20px;
-    }
-
-    .categ_crumb_panel_btn {
-        float: left;
-        height: 21px;
-        line-height: 21px;
-        color: #666;
-        font-size: 16px;
-        font-weight: bold;
-        margin: 0px 26.5px 11px 0px;
-    }
-
-    .categ_crumb_panel_btn:hover {
-        color: #A01C0E;
-    }
-
-    .categ_crumb_panel_btn_only {
-        color: #A01C0E;
-    }
-}
-
-.categ_grey_box {
-    box-sizing: border-box;
-    border: solid 1px #E9E9E9;
-    background: #F8F8F8;
-    padding: 0px 20px 8px;
-    width: 100%;
-    margin-top: 15px;
-
-    .categ_grey_head {
-        height: 48px;
-        line-height: 50px;
-        color: #000;
-        font-size: 18px;
-        border-bottom: dashed 1px #E9E9E9;
-    }
-
-    .categ_grey_ul {
-        margin: 10px 0px 0px -10px;
-    }
-
-    .categ_grey_btn {
-        float: left;
-        line-height: 29px;
-        height: 29px;
-        color: #333;
-        font-size: 16px;
-        margin: 0px 10px 7px;
-    }
-
-    .categ_grey_btn_only {
-        background: #A01C0E;
-        color: #fff;
-        padding: 0px 5px 0px;
-        margin: 0px 5px 7px;
-    }
-}
-
-.categ_head_box {
-    border-bottom: solid 1px #E9E9E9;
-    padding-bottom: 22px;
-    margin-top: 20px;
-    border-top: solid 1px rgba(0, 0, 0, 0);
-
-    .categ_head_a {
-        float: left;
-        text-indent: 15px;
-        font-size: 20px;
-        color: #333;
-        border-left: solid 3px #A01C0E;
-        height: 18px;
-        line-height: 18px;
-    }
-
-    .categ_head_a_more {
-        float: right;
-        color: #999;
-        font-size: 14px;
-        margin-top: 0px;
-    }
-}
-
-.categ_table {}
-
-.categ_table_head_box {
-    height: 61px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_head_box>.categ_table_td_1 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_2 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_3 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_head_box>.categ_table_td_4 {
-    line-height: 61px;
-    line-height: 61px;
-}
-
-.categ_table_td_1 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 155px;
-    margin-right: 126px;
-}
-
-.categ_table_td_2 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 480px;
-    margin-right: 124px;
-}
-
-.categ_table_td_3 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 120px;
-    margin-right: 62px;
-}
-
-.categ_table_td_4 {
-    float: left;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    font-size: 16px;
-    width: 133px;
-}
-
-/* .categ_table_head_box>div:nth-of-type(even){background:aqua;} */
-.categ_table_li {
-    height: 161px;
-    box-sizing: border-box;
-    padding: 15px 0px;
-    border-bottom: solid 1px #E9E9E9;
-}
-
-.categ_table_td_1_img {
-    display: block;
-    width: 130px;
-    height: 130px;
-    margin: 0px auto;
-}
-
-.categ_table_li .categ_table_td_1 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_2 {
-    line-height: 160px;
-    line-height: 160px;
-    font-weight: bold;
-    color: #333;
-}
-
-.categ_table_li .categ_table_td_3 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_table_li .categ_table_td_4 {
-    line-height: 160px;
-    line-height: 160px;
-}
-
-.categ_3_index {
-    margin-top: 28px;
-}
-
-.categ_ul_img_1 {
-    margin-top: 20px;
-}
-
-.categ_li_img_1 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_1_a {}
-
-.categ_li_img_1_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_1_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_1:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_1_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_1:hover .categ_li_img_1_dot2 {
-    color: #A01C0E;
-}
-
-.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/18.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/19.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
-    content: '';
-    display: block;
-    position: absolute;
-    background: url(@/public/img/20.png) no-repeat left 0px;
-    background-size: 100% 100%;
-    width: 32px;
-    height: 32px;
-    left: 10px;
-    top: 0px;
-    z-index: 11;
-}
-
-.categ_ul_img_2 {
-    margin-top: 20px;
-}
-
-.categ_li_img_2 {
-    float: left;
-    margin: 0px 24px 20px 0px;
-    width: 180px;
-    position: relative;
-}
-
-.categ_li_img_2_a {}
-
-.categ_li_img_2_img {
-    display: block;
-    width: 180px;
-    height: 180px;
-}
-
-.categ_li_img_2_dot2 {
-    width: 168px;
-    margin: 10px auto 0px;
-    height: 32px;
-    line-height: 16px;
-    color: #333;
-    font-size: 14px;
-}
-
-.categ_li_img_2:nth-of-type(6n) {
-    margin-right: 0px;
-}
-
-.categ_li_img_2_hover_dot1 {
-    width: 152px;
-    position: absolute;
-    left: 50%;
-    margin-left: -76px;
-    bottom: 13px;
-    font-size: 14px;
-    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
-    -webkit-background-clip: text;
-    color: transparent;
-}
-
-.categ_li_img_2:hover .categ_li_img_2_dot2 {
-    color: #A01C0E;
-}
-
-/*乡村网-商城-搜索-查看更多*/
-.search_head_text_box {
-    height: 18px;
-    line-height: 18px;
-    color: #333;
-    font-size: 16px;
-    float: left;
-    margin-left: 20px;
-}
-
-.search_head_text_red {
-    color: #A01C0E;
-}
-
-.search_table_td_2 {
-    float: left;
-    height: 100%;
-    width: 480px;
-    margin-right: 124px;
-
-    .search_table_td_2_head {
-        height: 21px;
-        line-height: 21px;
-        color: #333;
-        font-size: 16px;
-        font-weight: bold;
-        width: 480px;
-    }
-
-    .search_table_td_2_dot2 {
-        max-height: 36px;
-        line-height: 18px;
-        color: #999;
-        font-size: 14px;
-        margin-top: 5px;
-        width: 480px;
-    }
-
-    .search_table_td_2_in {
-        height: 129px;
-        width: 480px;
-        display: table-cell;
-        vertical-align: middle;
-    }
-}
-
-@media screen and (min-width:1200px) {
-    /*pc_1440*/
-    @media screen and (max-width:1440px) {
-        /*1200*/
-    }
-
-    .pc_none {
-        display: none;
-    }
-}
-
-@media screen and (max-width:599px) {}
-
-@media screen and (max-width:320px) {}
+@import '@/assets/css/shop/search.less';
 </style>