完成商城-频道页

完成商城-频道页

assets/css/shop/class.less

@@ -0,0 +1,1119 @@
+@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) {}

assets/css/shop/index.less

@@ -0,0 +1,636 @@
+@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_banner {
+    width: 1200px;
+    margin: 20px auto 0px;
+
+    .shop_banner_a {
+        overflow: hidden;
+        display: block;
+        width: 1200px;
+        height: 90px;
+    }
+
+    .shop_banner_img {
+        display: block;
+        width: 1200px;
+    }
+}
+
+
+
+.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;
+}
+
+.shop_2_left_name_box {
+    height: 44px;
+    line-height: 45px;
+    color: #333;
+    font-size: 16px;
+    background: #F8F8F8;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0px 20px;
+
+    .shop_2_left_name {
+        height: 44px;
+        line-height: 45px;
+        word-break: keep-all;
+        white-space: nowrap;
+    }
+
+    .shop_2_left_name_box_a {
+        color: #333;
+        font-size: 16px;
+        height: 44px;
+        line-height: 45px;
+        cursor: pointer;
+    }
+}
+
+.shop_ul_img_1 {
+    border: solid 1px #EDCEA2;
+    background: #FFF7ED;
+    margin-top: 30px;
+}
+
+.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;
+}
+
+.shop_ul_img_3 {
+    margin-top: 30px;
+}
+
+.shop_li_img_3 {
+    float: left;
+    margin: 0px 24px 28px 0px;
+    width: 180px;
+    position: relative;
+}
+
+.shop_li_img_3_a {}
+
+.shop_li_img_3_img {
+    display: block;
+    width: 180px;
+    height: 180px;
+}
+
+.shop_li_img_3_dot2 {
+    width: 168px;
+    margin: 10px auto 0px;
+    height: 32px;
+    line-height: 16px;
+    color: #333;
+    font-size: 14px;
+}
+
+.shop_li_img_3:nth-of-type(6n) {
+    margin-right: 0px;
+}
+
+.shop_li_img_3_hover {
+    position: absolute;
+    z-index: 22;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    background: url(@/public/img/12.png) no-repeat left bottom;
+    background-size: 100% auto;
+}
+
+.shop_li_img_3_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;
+}
+
+.shop_li_img_3:hover .shop_li_img_3_hover {
+    display: block;
+}
+
+.shop_hot_door_box {
+    float: left;
+    width: 384px;
+    height: 221px;
+    border: solid 1px #EDCEA2;
+    background: #FFF7ED;
+    margin: 0px 24px 28px 0px;
+    box-sizing: border-box;
+}
+
+.shop_hot_door_left {
+    margin-left: 20px;
+}
+
+.shop_hot_door_h4 {
+    margin-top: 66px;
+    height: 26px;
+    color: #333;
+    font-size: 22px;
+    font-weight: lighter;
+}
+
+.shop_hot_door_title {
+    height: 1px;
+    border-left: solid 20px #333;
+    border-right: solid 20px #333;
+    padding: 0px 10px;
+    margin: 18px 0px 0px;
+    float: left;
+    color: #333;
+    font-size: 16px;
+    line-height: 1px;
+    float: left;
+}
+
+.shop_hot_door_btn {
+    float: left;
+    background: #EDCEA2;
+    color: #B58035;
+    font-size: 14px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0px 7px;
+    margin-top: 20px;
+}
+
+.shop_hot_door_img {
+    width: 146px;
+    height: 146px;
+    margin: 38px 21px 0px 19px;
+    float: right;
+}
+
+.shop_hot_door_a {}
+
+.shop_li_img_3:hover .shop_li_img_3_dot2 {
+    color: #A01C0E;
+}
+
+.shop_notice_content {
+    padding: 10px 30px 30px 30px;
+}
+
+@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/HotNews.vue

@@ -0,0 +1,260 @@
+<template>
+    <!-- 点击排行 -->
+    <div class="categ_3_index clearfix">
+        <div class="shop_name_box">
+            <div class="shop_name">
+                <span class="shop_name_box_a">点击排行</span>
+            </div>
+            <div class="shop_name_right"></div>
+        </div>
+        <div class="categ_ul_img_1">
+            <div class="categ_li_img_1" v-for="item in pageData1">
+                <NuxtLink
+                    :to="getShopPathDetail1(item)"
+                    class="categ_li_img_1_a"
+                    :title="item.name"
+                >
+                    <img class="categ_li_img_1_img" :src="item.imgurl" alt="item.name">
+                    <div class="categ_li_img_1_dot2 dot2">
+                        {{ item.name }}
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+    <!-- 点击排行 -->
+    <!-- 最新商机 -->
+    <div class="categ_5_index clearfix">
+        <div class="shop_name_box">
+            <div class="shop_name">
+                <span class="shop_name_box_a">最新商机</span>
+            </div>
+            <div class="shop_name_right"></div>
+        </div>
+        <div class="categ_ul_img_2">
+            <div class="categ_li_img_2" v-for="item in pageData2">
+                <NuxtLink
+                    :to="getShopPathDetail1(item)"
+                    class="categ_li_img_2_a"
+                    :title="item.name"
+                >
+                    <img class="categ_li_img_2_img" :src="item.imgurl" alt="item.name">
+                    <div class="categ_li_img_2_dot2 dot2">
+                        {{ item.name }}
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//1.获得模块数据 start ---------------------------------------->
+const pageData1 = ref([])//点击排行
+const pageData2 = ref([])//最新商机
+//创建请求数据json
+let getJson = [
+    {"level":"3,0,6"},//点击排行
+    {"level":"4,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) {
+        //最新数据2
+        pageData1.value = mkdata.data.goods[0];
+        //供应商品
+        pageData2.value = mkdata.data.goods[1];
+    } else {
+        ElMessage.error(mkdata.message)
+    }
+}
+getPageAllData();
+</script>
+
+<style lang="less" scoped>
+.dot2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.categ_3_index {
+    margin-top: 28px;
+}
+.clearfix {
+    overflow: hidden;
+}
+.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_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_right {
+    height: 40px;
+    border-bottom: 1px solid #E8E9EC;
+    margin-top: 4px;
+    background: #F8F8F8;
+    position: relative;
+    z-index: 2;
+}
+.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_1 {
+    margin-top: 20px;
+}
+
+.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;
+}
+</style>

components/shop/noData.vue

@@ -0,0 +1,48 @@
+<template>
+   <div v-if="pagetype == 'class'" class="nodata_style1">
+        <div class="nodata_style1_box">
+            <img src="@/public/image/Union.png" alt="暂无商品数据">
+            <div class="nodata_style1_box_text">暂无商品数据</div>
+        </div>
+   </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        pagetype: {
+            type: String,
+            default: ''
+        }
+    })
+</script>
+
+<style lang="less" scoped>
+    //用于频道页
+    .nodata_style1{
+        width: 1200px;
+        height: 400px;
+        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

@@ -0,0 +1,1217 @@
+<template>
+    <header>
+        <nav class="headerNav">
+            <div class="inner">
+                <div class="left">
+                    <span class="znxy">
+                        <a href="http://znxyw.org.cn/" target="_blank">中农兴业网团</a>
+                    </span>
+                    <span>
+                        旗下网站 · 政府类农业百强网站!
+                        <NuxtLink class="shop_nav_head_a" to="/" title="中国乡村网首页">中国乡村网首页</NuxtLink>
+                    </span>
+                </div>
+                <div class="right">
+                    <div class="menu">
+                        <button class="reg" @click="goTopic">
+                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon1.png" alt="商圈">商圈
+                        </button>
+                        <button class="reg" @click="goAdvertising">
+                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon2.png" alt="广告服务">广告服务
+                        </button>
+                    </div>
+                    <div class="right-top-menu">
+                        <button class="reg" @click="goLogin" v-show="!showToken">
+                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="登录">登录
+                        </button>
+                        <button class="reg" @click="goRegister" v-show="!showToken">
+                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon4.png" alt="注册">注册
+                        </button>
+                        <button class="reg" @click="userCenter" v-show="showToken">
+                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="用户信息">{{
+                                username }}
+                        </button>
+                        <button class="reg" @click="goSearch">
+                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/searchicon.png" alt="搜索">搜索
+                        </button>
+                    </div>
+                    <ul class="userInfo11" v-if="isShow">
+                        <li @click="gotosystem">个人中心</li>
+                        <li @click="exit">退出</li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <!--商城header-->
+        <div class="shop_head clearfix_2">
+            <div class="shop_head_left">
+                <NuxtLink class="shop_head_left_a" to="/" :title="webSiteName">
+                    <!-- <img class="shop_head_img" src="@/public/img/2.png" alt="乡村商城"> -->
+                    <img class="shop_head_img" :src="logo" :alt="webSiteName">
+                </NuxtLink>
+            </div>
+            <div class="shop_head_form_out clearfix">
+                <form class="shop_head_form" action="" method="">
+                    <input class="shop_head_btn hand" type="button" @click="goShopSearch">
+                    <input class="shop_head_inp hand" type="search" v-model="shopKeyword" placeholder="请输入要搜索的商品名称..">
+                </form>
+            </div>
+            <div class="shop_head_right clearfix_2">
+                <div 
+                    :class="['shop_head_right_btn', alert_1_num == 2 ? 'shop_head_right_btn_active' : '']"
+                    @mouseenter="qhTabs(2)"
+                >
+                    我要卖
+                </div>
+                <div 
+                    :class="['shop_head_right_btn', alert_1_num == 1 ? 'shop_head_right_btn_active' : '']"
+                    @mouseenter="qhTabs(1)"
+                >
+                    我要买
+                </div>
+                <!-- 我要卖  -->
+                <section class="shop_alert_out" v-if="alert_1_num == 2" @mouseenter="qhTabs(2)" @mouseleave="qhTabs(0)">
+                    <div class="shop_alert_box">
+                        <div class="shop_alert_head_box clearfix">
+                            <div class="shop_alert_head_name_1">全部信息分类</div>
+                            <div class="shop_alert_head_name_2">求购信息</div>
+                            <span class="shop_alert_head_btn_a" @click="goLogin">
+                                发布求购信息
+                            </span>
+                        </div>
+                        <div class="shop_alert_ul clearfix">
+                            <div class="shop_alert_li clearfix" v-for="item in shopMenu" :key="per_obj">
+                                <label class="shop_alert_li_label">{{ item.alias }}</label>
+                                <div class="shop_alert_li_panel clearfix">
+                                    <NuxtLink 
+                                        class="shop_alert_li_panel_a"
+                                        v-for="i in item.children"
+                                        :to="`/${item.aLIas_pinyin}/gongying/index.html`" 
+                                        :title="item.name"
+                                    >
+                                        {{ i.alias }}
+                                    </NuxtLink>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="shop_alert_1_index clearfix">
+                            <!--产品展台-->
+                            <div class="shop_name_box">
+                                <div class="shop_name">
+                                    <span class="shop_name_box_a">产品展台</span>
+                                </div>
+                                <div class="shop_name_right"></div>
+                            </div>
+                            <div class="shop_alert_img_ul clearfix">
+                                <div class="shop_alert_img_li clearfix" v-for="item in shopMenuGoods">
+                                    <NuxtLink 
+                                        :to="getShopLinkPath(item)" 
+                                        class="shop_alert_img_li_a"
+                                        :title="item.name"
+                                    >
+                                        <img class="shop_alert_img_li_img" :src="item.imgurl" :title="item.name" :alt="item.name">
+                                        <div class="shop_alert_img_li_right">
+                                            <!--产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台-->
+                                            <h4 class="shop_alert_img_li_h4 dot1">{{ item.name }}</h4>
+                                            <div class="shop_alert_img_li_dot3 dot3">{{ item.description }}</div>
+                                            <time class="shop_alert_img_li_time">{{ item.updated_at }}</time>
+                                        </div>
+                                    </NuxtLink>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <!-- 我要卖  -->
+                <!-- 我要买  -->
+                <section class="shop_alert_out" v-if="alert_1_num == 1" @mouseenter="qhTabs(1)" @mouseleave="qhTabs(0)">
+                    <div class="shop_alert_box">
+                        <div class="shop_alert_head_box clearfix">
+                            <div class="shop_alert_head_name_1">全部信息分类</div>
+                            <div class="shop_alert_head_name_2">供应信息</div>
+                            <span class="shop_alert_head_btn_a" @click="goLogin">
+                                发布供应信息
+                            </span>
+                        </div>
+                        <div class="shop_alert_ul clearfix">
+                            <div class="shop_alert_li clearfix" v-for="item in shopMenu" :key="item.id">
+                                <label class="shop_alert_li_label">{{ item.alias }}</label>
+                                <div class="shop_alert_li_panel clearfix">
+                                    <NuxtLink 
+                                        class="shop_alert_li_panel_a"
+                                        v-for="i in item.children"
+                                        :to="`/${item.aLIas_pinyin}/qiugou/list-1.html`" 
+                                        :title="item.name"
+                                    >
+                                        {{ i.alias }}
+                                    </NuxtLink>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="shop_alert_1_index clearfix">
+                            <!--产品展台-->
+                            <div class="shop_name_box">
+                                <div class="shop_name">
+                                    <span class="shop_name_box_a">产品展台</span>
+                                </div>
+                                <div class="shop_name_right"></div>
+                            </div>
+                            <div class="shop_alert_img_ul clearfix">
+                                <div class="shop_alert_img_li clearfix" v-for="item in shopMenuGoods">
+                                    <NuxtLink 
+                                        :to="getShopLinkPath(item)" 
+                                        class="shop_alert_img_li_a"
+                                        :title="item.name"
+                                    >
+                                        <img class="shop_alert_img_li_img" :src="item.imgurl" :title="item.name" :alt="item.name">
+                                        <div class="shop_alert_img_li_right">
+                                            <h4 class="shop_alert_img_li_h4 dot1">{{ item.name }}</h4>
+                                            <div class="shop_alert_img_li_dot3 dot3">{{ item.description }}</div>
+                                            <time class="shop_alert_img_li_time">{{ item.updated_at }}</time>
+                                        </div>
+                                    </NuxtLink>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <!-- 我要买  -->
+            </div>
+        </div>
+        <!--商城header-->
+        <el-dialog v-model="dialogTableVisible" width="800">
+            <div class="tips">
+                <p>
+                    <img src="@/public/topic/tips.png"> 提示:注册请联系管理员操作!
+                </p>
+                <p>联系电话:010-56019387</p>
+                <p>QQ ： 2909421493 、213552413</p>
+            </div>
+        </el-dialog>
+    </header>
+</template>
+
+<script setup>
+//1.加载基本依赖 start ---------------------------------------->
+import { ref, watch, onMounted } from 'vue'
+import { ElDialog } from 'element-plus'
+import { getToken, setToken, removeToken } from '@/store/useCookieStore'
+import { setTicket, removeTicket } from '@/store/useticketStore'
+//网站地址
+const { $webUrl, $CwebUrl, $BwebUrl, $LoginWebUrl } = useNuxtApp()
+//1.加载基本依赖 end ---------------------------------------->
+
+//1.登录逻辑 start ---------------------------------------->
+let ticket = ref('')
+let token = ref('')
+let route = useRoute()
+
+//页面每次刷新先判断一下用户状态是否已经过期了
+//如果没有过期再储存token
+ticket.value = route.query.ticket
+token.value = route.query.admintoken
+
+if (ticket.value) {
+    setTicket(ticket.value)
+}
+if (token.value) {
+    setToken(token.value)
+}
+
+//搜索框
+let keyword = useState('keyword', () => '')
+//用户名
+let username = useState('username', () => '用户中心')
+//是否删除
+let isDel = useState('isDel', () => 1)
+//是否显示用户中心
+let isShow = useState('isShow', () => false)
+
+let token1 = useState("token1", () => '')
+let showToken = useState("showToken", () => '')
+token1.value = getToken()
+
+
+//检测登录状态
+let tokenStatus = ref('');
+tokenStatus.value = getToken()
+if (tokenStatus.value == undefined) {
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log('错误：未获取到用户token,如果在本地测试请忽略！');
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+} else {
+    console.log(tokenStatus.value);
+}
+
+//点击登录按钮
+let goLogin = () => {
+    //开启线上登录模式 start---------------------------------------->
+    isDel.value = 0
+    token1.value = getToken()
+    //王鹏
+    //window.open($BwebUrl + "/auth/login.php?backurl=" + $CwebUrl, '_blank');
+    //刘佳伟
+    //window.open($LoginWebUrl + "/api/goLogin?backurl=" + $CwebUrl, '_blank');
+    //党云龙
+    window.open($BwebUrl + "/#/login?backurl=" + $CwebUrl, '_blank');
+    //开启线上登录模式 end---------------------------------------->
+
+    //开启本地登录模式 start---------------------------------------->
+    // window.location.href = $BwebUrl + "/auth/login.php?backurl=" + $CwebUrl;
+    //"http://adminpre.bjzxtw.org.cn/auth/login.php?backurl=http://nwpre.bjzxtw.org.cn";
+    //开启本地登录模式 end---------------------------------------->
+}
+let dialogTableVisible = ref(false)
+
+//点击注册按钮
+let goRegister = () => {
+    dialogTableVisible.value = true
+}
+
+//点击用户中心
+let userCenter = () => {
+    if (isShow.value) {
+        isShow.value = false
+        return
+    } else {
+        isShow.value = true
+        return
+    }
+}
+
+// 添加点击事件处理函数
+const handleClickOutside = (event) => {
+    // 获取用户信息菜单元素
+    const userInfoMenu = document.querySelector('.userInfo11');
+    // 获取用户按钮元素
+    const userButton = document.querySelector('.reg img[alt="用户信息"]')?.parentElement;
+
+    // 如果点击的不是菜单本身且不是用户按钮，则隐藏菜单
+    if (userInfoMenu &&
+        !userInfoMenu.contains(event.target) &&
+        !userButton?.contains(event.target)) {
+        isShow.value = false;
+    }
+}
+//2.登录逻辑 end ---------------------------------------->
+
+//3.跳转菜单逻辑 start ---------------------------------------->
+let gotosystem = () => {
+    let url = $BwebUrl + '/#/login?userurl=' + $CwebUrl;
+    isShow.value = false
+    //window.location.href = url; 
+    window.open(url, '_blank');
+}
+
+//点击退出按钮
+let exit = () => {
+    window.location.href = $CwebUrl;
+    isShow.value = false
+    isDel.value = 1
+    token1.value = getToken()
+
+    let tokendata = getToken()
+
+    //王鹏
+    // let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
+    //   console.log("用户退出登录======token为：", tokendata,url)
+    //刘佳伟
+    let url = $LoginWebUrl + '/api/logout?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
+    window.location.href = url;
+    removeToken()
+    removeTicket()
+}
+
+//点击返回首页
+let backHome = () => {
+    window.location.href = $CwebUrl;
+}
+
+//点击搜索按钮
+let goSearch = () => {
+    const route = `/search/search?keyword=${keyword.value}`;
+    window.location.href = route;
+}
+
+// 点击广告服务
+let goAdvertising = () => {
+    //本地启动广告服务
+    //window.open('/advertising?activeName=1', '_blank');
+    //线上启动
+    if (getToken()) {
+        window.open($CwebUrl + '/advertising?activeName=1', '_blank');
+    } else {
+        goLogin()
+    }
+}
+
+//点击商圈
+let goTopic = () => {
+    if (getToken()) {
+        window.open($CwebUrl + '/topic', '_blank');
+    } else {
+        goLogin()
+    }
+}
+
+//监听token状态
+watch(token1, (newval, oldval) => {
+    //console.log(newval, oldval);
+    showToken.value = newval
+}, {
+    deep: true,
+    immediate: true,
+})
+
+//获得网站logo
+const logo = ref("")
+const webSiteName = ref("")
+let getLogo = async () => {
+    const responseStatus = await requestDataPromise('/web/getWebsiteHead', {
+        method: 'GET',
+        query: {},
+    });
+    logo.value = responseStatus.data.logo;
+    webSiteName.value = responseStatus.data.website_name;
+}
+getLogo();
+//3.跳转菜单逻辑 end ---------------------------------------->
+
+//4.获取广告 start ---------------------------------------->
+let adImg = ref({})
+//4.获取广告 end ---------------------------------------->
+
+//5.获取登录状态 start ---------------------------------------->
+// 在组件卸载时移除事件监听
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+})
+
+onMounted(async () => {
+    //添加监听关闭个人中心菜单
+    document.addEventListener('click', handleClickOutside);
+
+    //从客户端获取登录状态
+    //从客户端阶段开始 持续查询登录状态
+    let getLoginStatus = async () => {
+        //获得token
+        const token = getToken();
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+
+        if (token == undefined) {
+            //如果没有获取到token 不访问后端获取在线状态
+            console.log("没有获取到token！无需查询登录状态！")
+            showToken.value = false;
+
+        } else {
+            //如果获取到了token 访问后端查询状态
+            console.log("已获取到用户token,开始查询登录状态！")
+            const queryParams = new URLSearchParams({
+                token: getToken()
+            });
+            let url = `${$webUrl}/api/loginStatus?${queryParams.toString()}`
+            const responseStatus = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Userurl': $CwebUrl,
+                    //'token': getToken(),
+                    'Origin': $CwebUrl
+                }
+            });
+            const result = await responseStatus.json();
+            console.log(result)
+
+            if (result.code == 200) {
+                console.log("用户已经登录！");
+                showToken.value = true;
+            }
+            if (result.code == -1) {
+                isShow.value = false;
+                showToken.value = false;
+                removeToken();
+                removeTicket();
+                ElMessage.error('您没有权限登录该网站！')
+            }
+            if (result.code == -2) {
+                isShow.value = false;
+                showToken.value = false;
+                removeToken();
+                removeTicket();
+                ElMessage.error('您已退出登录！')
+            }
+        }
+    }
+    getLoginStatus();
+    setInterval(getLoginStatus, 3000);
+
+    //从客户端获取广告
+    //从客户端获取行政职能部门 加快打开速度
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_top`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg.value = resultAd1.data[0];
+
+    //从客户端获取用户名
+    let userInfoUrl = `${$webUrl}/user/getUserInfo`
+    const userInfoResponse = await fetch(userInfoUrl, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const userInfo = await userInfoResponse.json();
+    if (userInfo.code == 200) {
+        username.value = userInfo.data.nickname
+    }
+
+})
+//5.获取登录状态 end ---------------------------------------->
+
+//6.商城 start ---------------------------------------->
+//6.1 商城搜索
+const shopKeyword = ref('')
+let goShopSearch = () => {
+    const route = `/xiangcunshangcheng/search/search?keyword=${shopKeyword.value}`;
+    window.location.href = route;
+}
+//6.2 商城菜单
+//我要卖
+const alert_1_num = ref(0)
+const qhTabs = function(number){
+    alert_1_num.value = number
+}
+//6.3 获得商城菜单
+const shopMenu = ref([]) //获得商城菜单
+const shopMenuGoods = ref([]) //获得产品站台里面的商品
+
+let getShopMenu = async () => {
+    const responseStatus = await requestDataPromise('/web/getWebsiteshopCat', {
+        method: 'GET',
+        query: {
+            id:346,
+            page:1,
+            pageSize:10,//请求所有菜单
+        },
+    });
+    shopMenu.value = responseStatus.data.category[0].children;
+    //shopMenuGoods.value = responseStatus.data.goods;
+    //只展示6个商品
+    for(let index in responseStatus.data.goods){
+        if(index<=5){
+            shopMenuGoods.value.push(responseStatus.data.goods[index])
+        }
+    }
+}
+getShopMenu();
+//6.商城 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//常规 header start ---------------------------------------->
+.userInfo11 {
+    width: 100px;
+    height: 80px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    position: absolute;
+    top: 40px;
+    right: 35px;
+    font-size: 14px;
+    z-index: 999;
+
+    li {
+        height: 40px;
+        line-height: 40px;
+        color: #333333;
+        padding-left: 10px;
+    }
+
+    >li:hover {
+        color: #028E21;
+    }
+}
+
+.tips {
+    padding: 20px 0;
+    text-align: center;
+    font-size: 20px;
+    color: #333333;
+    font-weight: bold;
+
+    img {
+        width: 78px;
+        height: 78px;
+        vertical-align: middle;
+        margin-right: 20px;
+
+        p {
+            line-height: 30px;
+        }
+    }
+
+    p {
+        line-height: 40px;
+    }
+
+    >p:first-child {
+        margin-bottom: 30px;
+    }
+
+}
+
+/* 页面头部 */
+header {
+    width: 100%;
+    font-size: 12px;
+    font-family: PingFang SC-Regular;
+    color: #666666;
+    background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/headtopbg.png") repeat-x;
+}
+
+.headerNav {
+    width: 100%;
+    height: 33px;
+    line-height: 33px;
+}
+
+.headerNav .left span {
+    margin-right: 20px;
+
+    a {
+        color: #666666;
+    }
+}
+
+.headerNav .right {
+    display: flex;
+    margin-right: 10px;
+    position: relative;
+
+    button {
+        font-size: 12px;
+        color: #666666;
+        border: none;
+        background: none;
+        cursor: pointer;
+    }
+
+    .login {
+        width: 36px;
+        height: 19px;
+        color: #fff;
+        border-radius: 4px;
+        background-color: #028E21;
+        margin-right: 15px;
+        cursor: pointer;
+    }
+
+    .menu,
+    .right-top-menu {
+        display: flex;
+    }
+
+    .reg {
+        margin-right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 33px;
+
+        img {
+            margin-right: 5px;
+        }
+    }
+}
+
+.headerNav .right {
+    float: right;
+    font-size: 12px;
+
+    span {
+        margin-right: 20px;
+    }
+
+    .home,
+    .collection {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: -3px;
+    }
+
+    .home {
+        background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
+    }
+
+    .collection {
+        background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
+    }
+
+    .exit {
+        line-height: 30px;
+    }
+
+    // .exit:hover{
+    //     color: #028E21;
+    // }
+}
+
+/* // 头部logo */
+.headerLogo {
+    height: 145px;
+    position: relative;
+
+    //background: url("../../public/head/topBg.png") no-repeat center;
+    .titlead {
+        position: absolute;
+        bottom: 14px;
+        right: 26px;
+        width: 830px;
+        height: 110px;
+        overflow: hidden;
+
+        a {
+            display: block;
+            width: 830px;
+            height: 110px;
+            overflow: hidden;
+        }
+
+        img {
+            width: 100%;
+            height: 110px;
+        }
+    }
+
+    .inner {
+        position: relative;
+        height: 145px;
+    }
+
+    .inner>img {
+        width: 297px;
+        height: 110px;
+        margin-top: 20px;
+        cursor: pointer;
+    }
+
+    /* // 搜索框部分 */
+    .search {
+        float: left;
+        width: 440px;
+        height: 40px;
+        background-color: #fff;
+        line-height: 40px;
+        margin-left: 39px;
+        margin: 71px 39px 48px;
+        position: relative;
+
+        em {
+            display: inline-block;
+            width: 30px;
+            height: 30px;
+            background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png") no-repeat;
+            position: absolute;
+            top: 5px;
+            left: 15px;
+        }
+
+        input {
+            float: left;
+            width: 351px;
+            height: 40px;
+            border: none;
+            outline: none;
+            padding-left: 65px;
+            box-sizing: border-box;
+            border: 1px solid #028E21;
+            border-right: none;
+            border-radius: 4px 0px 0px 4px;
+        }
+
+        button {
+            float: right;
+            width: 89px;
+            height: 40px;
+            background-color: #028E21;
+            border-radius: 0px 4px 4px 0px;
+            border: none;
+            font-size: 14px;
+            color: #fff;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+        }
+
+    }
+
+    /* // 右侧小图标 */
+    .serve {
+        float: right;
+        height: 60px;
+        margin-top: 60px;
+        margin-right: 60px;
+
+        >li {
+            float: left;
+            height: 64px;
+            margin-left: 48px;
+        }
+
+        >li>a {
+            display: inline-block;
+            height: 64px;
+        }
+
+        >li img {
+            width: 29px;
+            height: 29px;
+            padding: 8px 14px;
+        }
+
+        >li p {
+            height: 28px;
+            text-align: center;
+            color: #666666;
+        }
+    }
+}
+//常规 header end ---------------------------------------->
+
+//商城 header start ---------------------------------------->
+.clearfix_2::after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.shop_head {
+    width: 1200px;
+    margin: 30px auto;
+}
+
+.shop_head_left {
+    float: left;
+    width: 322px;
+    margin-right: 33px;
+
+    .shop_head_left_a {
+        width: 322px;
+        display: block;
+    }
+}
+
+.shop_head_img {
+    width: 297px;
+    height: 110px;
+    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;
+        cursor: pointer;
+    }
+
+    .shop_head_inp {
+        display: block;
+        text-indent: 11px;
+        height: 40px;
+        line-height: 40px;
+        width: 490px;
+        border: none;
+        outline: none;
+    }
+}
+
+.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 !important;
+    }
+}
+
+.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_active {
+    color: #fff !important;
+    background-size: 24px 24px !important;
+    background: url(@/public/img/4a.png) no-repeat 20px center #A01C0E !important;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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: 170px;
+        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 0 0;
+    }
+}
+
+.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;
+}
+
+.clearfix {
+    overflow: hidden;
+}
+
+.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%;
+    }
+}
+
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dot3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+a.shop_nav_head_a {
+    color: #A01C0E !important;
+    display: inline-block;
+    box-sizing: border-box;
+    padding-left: 17px;
+    background: url(@/public/img/home.png) no-repeat left center;
+    background-size: 12px 12px;
+    margin-left: 10px;
+}
+//商城 header end ---------------------------------------->
+</style>

components/shop/subMenu.vue

@@ -0,0 +1,373 @@
+<template>
+<!-- 商城首页 -->
+<nav class="shop_nav clearfix">
+    <div class="shop_nav_head">
+        <NuxtLink class="shop_nav_head_a" to="/xiangcunshangcheng/index.html" title="商城首页"></NuxtLink>
+    </div>
+    <div class="shop_nav_in clearfix">
+        <NuxtLink 
+            :class="['shop_nav_in_a', { 'shop_nav_in_a_active': item.category_id == navId }]"
+            :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/index.html`"
+            v-for="item in shopNav"
+            :title="item.alias"
+        >
+            {{item.alias}}
+        </NuxtLink>
+    </div>
+</nav>
+<!-- 商城首页 -->
+<!-- 地区选择 -->
+<div class="shop_name_out">
+    <div class="shop_name_box clearfix">
+        <div class="shop_name">地区选择</div>
+        <div class="shop_name_right">
+            <div class="shop_name_in clearfix" ref="shop_name_parent">
+                <div class=" clearfix" v-show="shop_name_num == 1">
+                    <NuxtLink 
+                        :to="`/xiangcunshangcheng/${shopNavOnePinyin}/index.html?cityid=${item.id}`" 
+                        :title="item.name" 
+                        v-for="item in provinceList1"
+                        :class="['shop_name_a', { 'shop_name_a_only': item.id == cityId }]"
+                    >
+                        {{ item.abbreviation }}
+                    </NuxtLink>
+                </div>
+                <div class=" clearfix" v-show="shop_name_num == 2">
+                    <NuxtLink 
+                        :class="['shop_name_a', { 'shop_name_a_only': item.id == cityId }]"
+                        :to="`/xiangcunshangcheng/${shopNavOnePinyin}/index.html?cityid=${item.id}`" 
+                        :title="item.name" 
+                        v-for="item in provinceList2"
+                    >
+                        {{ item.abbreviation }}
+                    </NuxtLink>
+                </div>
+                <div class=" clearfix" v-show="shop_name_num == 3">
+                    <NuxtLink 
+                        :class="['shop_name_a', { 'shop_name_a_only': item.id == cityId }]"
+                        :to="`/xiangcunshangcheng/${shopNavOnePinyin}/index.html?cityid=${item.id}`" 
+                        :title="item.name" 
+                        v-for="item in provinceList3"
+                    >
+                        {{ item.abbreviation }}
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="shop_name_btn hand"
+                @click="shop_name_num >= shop_name_leng ? shop_name_num = 1 : shop_name_num++">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 地区选择 -->
+</template>
+
+<script setup>
+import { ref, onMounted ,watch } from 'vue'
+
+//1.获得商城导航 start ---------------------------------------->
+//1.1 获得商城导航
+const shopNav = ref("")
+const shopNavOnePinyin = ref("")//获得商城导航的第一个 作为默认的跳转链接
+let getShowNav = async () => {
+    const responseStatus = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            placeid:0,
+            pid:346,
+            num:8
+        },
+    });
+    shopNav.value = responseStatus.data
+    shopNavOnePinyin.value = responseStatus.data[0].aLIas_pinyin
+}
+getShowNav();
+
+//1.2 标记当前选择的地区
+const route = useRoute();
+//获得详情id
+const cityId = ref(route.query.cityid)
+
+watch(route, () => {
+    cityId.value = route.query.cityid
+})
+
+//1.3 获得频道导航的id，并且标记导航
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/');
+const targetSegment = segments[2];
+
+const navId = ref(0)//当前导航标记哪个
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if (getRouteId.code == 200) {
+    navId.value = parseInt(getRouteId.data.category_id)
+} else {
+    console.log("错误位置：通过url路径查询导航池id")
+}
+
+//1.获得商城导航 end ---------------------------------------->
+
+//2.获得省列表 start ---------------------------------------->
+const provinceList1 = ref([]);//省列表1
+const provinceList2 = ref([]);//省列表2
+const provinceList3 = ref([]);//省列表3
+onMounted(async ()  => {
+    //获得所有的省
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result = await response.json();
+        for(let index in result.data){
+            if(index < 15){
+                provinceList1.value.push(result.data[index])
+            }else if(index > 14 && index < 30){
+                provinceList2.value.push(result.data[index])
+            }else if(index > 29){
+                provinceList3.value.push(result.data[index])
+            }
+        }
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+
+   
+})
+//2.获得商城导航 start ---------------------------------------->
+
+//3.地区滚动 start ---------------------------------------->
+// 地区选择
+const shop_name_num = ref(1)
+const shop_name_parent = ref(null)
+const shop_name_leng = ref(1)
+onMounted(() => {
+    const shop_name_son = shop_name_parent.value.querySelectorAll("div")
+    shop_name_leng.value = shop_name_son.length
+}) 
+//3.地区滚动 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.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_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_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%;
+    }
+}
+.clearfix {
+    overflow: hidden;
+}
+.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_nav_in_a_active {
+    color: #A01C0E;
+}
+
+</style>

components/shop/subMenu2.vue

@@ -0,0 +1,395 @@
+<template>
+<!-- 商城首页 -->
+<nav class="shop_nav clearfix">
+    <div class="shop_nav_head">
+        <NuxtLink class="shop_nav_head_a" to="/xiangcunshangcheng/index.html" title="商城首页"></NuxtLink>
+    </div>
+    <div class="shop_nav_in clearfix">
+        <NuxtLink 
+            :class="['shop_nav_in_a', { 'shop_nav_in_a_active': item.category_id == navId }]"
+            :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/index.html`"
+            v-for="item in shopNav"
+            :title="item.alias"
+        >
+            {{item.alias}}
+        </NuxtLink>
+    </div>
+</nav>
+<!-- 商城首页 -->
+<!-- 地区选择 -->
+<div class="shop_name_out">
+    <div class="shop_name_box clearfix">
+        <div class="shop_name">地区选择</div>
+        <div class="shop_name_right">
+            <div class="shop_name_in clearfix" ref="shop_name_parent">
+                <div class=" clearfix" v-show="shop_name_num == 1">
+                    <span 
+                        @click="setUrlParam(item)"
+                        :title="item.name" 
+                        v-for="item in provinceList1"
+                        :class="['shop_name_a', { 'shop_name_a_only': item.id == cityId }]"
+                    >
+                        {{ item.abbreviation }}
+                    </span>
+                </div>
+                <div class=" clearfix" v-show="shop_name_num == 2">
+                    <span 
+                        :class="['shop_name_a', { 'shop_name_a_only': item.id == cityId }]"
+                        @click="setUrlParam(item)"
+                        :title="item.name" 
+                        v-for="item in provinceList2"
+                    >
+                        {{ item.abbreviation }}
+                    </span>
+                </div>
+                <div class=" clearfix" v-show="shop_name_num == 3">
+                    <span 
+                        :class="['shop_name_a', { 'shop_name_a_only': item.id == cityId }]"
+                        @click="setUrlParam(item)"
+                        :title="item.name" 
+                        v-for="item in provinceList3"
+                    >
+                        {{ item.abbreviation }}
+                    </span>
+                </div>
+            </div>
+            <div class="shop_name_btn hand"
+                @click="shop_name_num >= shop_name_leng ? shop_name_num = 1 : shop_name_num++">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 地区选择 -->
+</template>
+
+<script setup>
+import { ref, onMounted ,watch } from 'vue'
+
+//1.获得商城导航 start ---------------------------------------->
+//1.1 获得商城导航
+const shopNav = ref("")
+let getShowNav = async () => {
+    const responseStatus = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            placeid:0,
+            pid:346,
+            num:8
+        },
+    });
+    shopNav.value = responseStatus.data
+}
+getShowNav();
+
+//1.2 标记当前选择的地区
+const route = useRoute();
+const router = useRouter()
+//获得详情id
+const cityId = ref(route.query.cityid)
+
+//1.3 获得频道导航的id，并且标记导航
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/');
+const targetSegment = segments[2];
+
+const navId = ref(0)//当前导航标记哪个
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if (getRouteId.code == 200) {
+    navId.value = parseInt(getRouteId.data.category_id)
+} else {
+    console.log("错误位置：通过url路径查询导航池id")
+}
+
+//1.4设置url中的参数
+const setUrlParam = (item) => {
+    //判断url中是否含有select参数，如果有就删掉
+    cityId.value = item.id;
+    // 复制当前的 query 对象
+    const newQuery = { ...route.query };
+    // 更新 cityid
+    newQuery.cityid = item.id;
+    // 检查是否有 select 参数，如果有则删除
+    if ('select' in newQuery) {
+        delete newQuery.select;
+    }
+    // 使用 router.replace 更新 URL
+    router.replace({
+        query: newQuery
+    });
+}
+
+//1.5 监听路由变化
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal == undefined){
+        cityId.value = ''
+    }
+})
+
+
+//1.获得商城导航 end ---------------------------------------->
+
+//2.获得省列表 start ---------------------------------------->
+const provinceList1 = ref([]);//省列表1
+const provinceList2 = ref([]);//省列表2
+const provinceList3 = ref([]);//省列表3
+onMounted(async ()  => {
+    //获得所有的省
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result = await response.json();
+        for(let index in result.data){
+            if(index < 15){
+                provinceList1.value.push(result.data[index])
+            }else if(index > 14 && index < 30){
+                provinceList2.value.push(result.data[index])
+            }else if(index > 29){
+                provinceList3.value.push(result.data[index])
+            }
+        }
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+
+   
+})
+//2.获得商城导航 start ---------------------------------------->
+
+//3.地区滚动 start ---------------------------------------->
+// 地区选择
+const shop_name_num = ref(1)
+const shop_name_parent = ref(null)
+const shop_name_leng = ref(1)
+onMounted(() => {
+    const shop_name_son = shop_name_parent.value.querySelectorAll("div")
+    shop_name_leng.value = shop_name_son.length
+}) 
+//3.地区滚动 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.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_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;
+        cursor: pointer;
+    }
+
+    .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_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%;
+    }
+}
+.clearfix {
+    overflow: hidden;
+}
+.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_nav_in_a_active {
+    color: #A01C0E;
+}
+
+</style>

components/shop/swiperXcShop.vue

@@ -0,0 +1,284 @@
+<template>
+    <div class="swiper">
+        <el-carousel :interval="933993" height="300px" indicator-position="outside" @change="change_fun">
+            <el-carousel-item>
+                <div 
+                    class="shop_li_img_1 clearfix" 
+                    :class="per_index == 2 ? 'shop_li_img_1_hot' : ''"
+                    v-for="item in props.data"
+                >
+                    <nuxtLink 
+                        :to="getShopPathDetail1(item)"
+                        class="shop_li_img_1_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_1_img" :src="item.imgurl" alt="item.name">
+                        <div class="shop_li_img_1_dot2 dot2">
+                            {{ item.name }}
+                        </div>
+                        <div class="shop_li_img_1_price">{{getShopType(item)}}</div>
+                    </nuxtLink>
+                </div>
+            </el-carousel-item>
+            <el-carousel-item>
+                <div 
+                    class="shop_li_img_1 clearfix" 
+                    :class="per_index == 2 ? 'shop_li_img_1_hot' : ''"
+                    v-for="item in props.data2"
+                >
+                    <nuxtLink 
+                        :to="getShopPathDetail1(item)"
+                        class="shop_li_img_1_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_1_img" :src="item.imgurl" alt="item.name">
+                        <div class="shop_li_img_1_dot2 dot2">
+                            {{ item.name }}
+                        </div>
+                        <div class="shop_li_img_1_price">{{getShopType(item)}}</div>
+                    </nuxtLink>
+                </div>
+            </el-carousel-item>
+            <el-carousel-item>
+                <div 
+                    class="shop_li_img_1 clearfix" 
+                    :class="per_index == 2 ? 'shop_li_img_1_hot' : ''"
+                    v-for="item in props.data3"
+                >
+                    <nuxtLink 
+                        :to="getShopPathDetail1(item)"
+                        class="shop_li_img_1_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_1_img" :src="item.imgurl" alt="item.name">
+                        <div class="shop_li_img_1_dot2 dot2">
+                            {{ item.name }}
+                        </div>
+                        <div class="shop_li_img_1_price">{{getShopType(item)}}</div>
+                    </nuxtLink>
+                </div>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+
+import { ref } from 'vue'
+const roll_num_lang = ref(3);
+const roll_num_this = ref(0);
+
+const change_fun = (the_1) => {
+    roll_num_this.value = the_1
+}
+//1.页面必备方法 end ---------------------------------------->
+
+//2.组件数据 start ---------------------------------------->
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    },
+    data2: {
+        type: Array,
+        default: () => []
+    },
+    data3: {
+        type: Array,
+        default: () => []
+    }
+})
+//2.组件数据 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.dot2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.shop_li_img_1 {
+    float: left;
+    width: 150px;
+    position: relative;
+    margin: 45px 14px 8px;
+}
+
+.shop_li_img_1_img {
+    display: block;
+    width: 100%;
+    height: 150px !important;
+}
+
+.shop_li_img_1_dot2 {
+    height: 36px !important;
+    line-height: 18px;
+    color: #333;
+    font-size: 14px;
+    margin: 7px auto 6px;
+    width: 140px;
+}
+
+.shop_li_img_1_price {
+    text-align: center;
+    height: 21px;
+    line-height: 21px;
+    color: #A01C0E;
+    font-size: 18px;
+    width: 140px;
+    margin: 0px auto 0px;
+    font-weight: bold;
+}
+
+.shop_li_img_1_hot::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 35px;
+    height: 25px;
+    left: 10px;
+    top: 0px;
+    z-index: 11;
+    background: url(../../public/img/11.png) no-repeat left 0px;
+    background-size: 100% 100%;
+}
+
+.shop_li_img_1:hover .shop_li_img_1_dot2 {
+    color: #A01C0E;
+}
+
+
+
+.roll_num_box {
+    position: absolute;
+    z-index: 2;
+    left: 60px;
+    bottom: 0px;
+    height: 60px;
+    line-height: 60px;
+    color: #fff;
+    font-size: 16px;
+
+    .roll_num_box_new {
+        font-size: 20px;
+    }
+}
+
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.swiper {
+    width: 100%;
+    height: 405px;
+    position: relative;
+
+    img {
+        width: 100%;
+        height: 405px;
+    }
+
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: red;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        padding: 0 144px;
+
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+    }
+
+}
+
+.swiper {
+    height: 300px;
+}
+
+.el-carousel {
+
+    /deep/.el-carousel__indicators--outside {
+        margin-top: -35px;
+    }
+
+    /deep/.el-carousel__arrow--right {
+        width: 35px;
+        height: 57px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0);
+        position: absolute;
+        right: 9;
+        border: none;
+        border-radius: 0;
+        top: 100%;
+        margin-top: -28px;
+    }
+
+    /deep/ .el-carousel__indicators {
+        // 指示器
+        left: unset;
+        transform: unset;
+        right: 10px;
+        bottom: 11px;
+    }
+
+    /deep/ .el-carousel__button {
+        // 指示器按钮
+        width: 10px;
+        height: 10px;
+        border: none;
+        border-radius: 5px;
+        background: #EDCEA2;
+        opacity: .5;
+    }
+
+    /deep/ .is-active .el-carousel__button {
+        // 指示器激活按钮
+        background: #EDCEA2;
+
+        opacity: 1;
+
+    }
+
+    /deep/ .el-carousel__container {
+        height: 100%;
+    }
+
+
+
+
+
+
+
+}
+
+.custom-indicator button {
+    background-color: #fff;
+
+    opacity: 1;
+    width: 8px;
+    height: 8px;
+}
+
+.custom-indicator button.is-active {
+    background-color: #DD7D18;
+    width: 58px;
+
+    opacity: 1;
+}
+</style>

composables/publicFunction.ts

@@ -76,6 +76,35 @@ const getLinkPathDetail1 = (item: any) => {
     return `/${item.aLIas_pinyin}/${item.id}.html`;
   }
 }
+//3.2商城跳转
+//3.2.1 菜单
+const getShopLinkPath = (item: any) => {
+    if (item.type_id == 1) {
+        //1=供应
+        return `/${item.pinyin}/gongying/${item.good_id}.html`;
+    } else {
+        //2=求购
+        return `/${item.pinyin}/qiugou/${item.good_id}.html`;
+    }
+}
+//3.2.2 商品详情
+const getShopPathDetail1 = (item: any) => {
+    if (item.type_id == 1) {
+        //1=供应
+        return `/${item.pinyin}/gongying/${item.id}.html`;
+    } else {
+        //2=求购
+        return `/${item.pinyin}/qiugou/${item.id}.html`;
+    }
+}
+//3.2.3 商品属于求购还是供应
+const getShopType = (item: any) => {
+    if (item.type_id == 1) {
+        return '供应';
+    } else {
+        return '求购';
+    }
+}
 //3.格式化跳转路径 end ---------------------------------------->
 
 
@@ -88,6 +117,8 @@ const getRoutePath = (type: Number) => {
   const segments = fullPath.split('/');
   const targetSegmentOne = segments[1];
   const targetSegmentTwo = segments[2];
+  const targetSegmentThree = segments[3];
+  const targetSegmentFour = segments[4];
 
   if (type == 1) {
     return targetSegmentOne;
@@ -95,9 +126,16 @@ const getRoutePath = (type: Number) => {
   if (type == 2) {
     return targetSegmentTwo;
   }
+  if (type == 3) {
+    return targetSegmentThree;
+  }
+  if (type == 4) {
+    return targetSegmentFour;
+  }
 }
-
-
-
 //4.获得路由路径 end ---------------------------------------->
-export { getTime, getTitleLength, getLinkPath, getLinkPathDetail, getRoutePath, getLinkPath1, getLinkPathDetail1 };
+
+export { getTime, getTitleLength, getLinkPath, getLinkPathDetail, 
+    getRoutePath, getLinkPath1, getLinkPathDetail1,getShopLinkPath,
+    getShopPathDetail1,getShopType
+ };

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

@@ -0,0 +1,1075 @@
+<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>
+        <!--子菜单和地区选择-->
+        <ShopSubMenu></ShopSubMenu>
+
+        
+        <!-- 当前位置 -->
+        <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>
+                &gt;
+                <a class="categ_crumb_left_a" href="" title=""> 农副产品 </a>
+                &gt;
+                <span class="categ_crumb_left_text"> 皮毛畜禽 </span>
+            </div>
+        </div>
+        <!-- 当前位置 -->
+
+        <div class="supply_1_index clearfix">
+            <img class="supply_1_img" src="@/public/img/10.png" title="" alt="">
+            <div class="supply_1_right">
+                <h4 class="supply_1_h4">红肉蜜柚葡萄柚子整箱包邮10斤当季现摘新鲜水果红肉蜜柚葡萄柚子整箱包邮</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>
+                </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 ">175</span></div>
+                    <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 ">74.9元/斤</span></div>
+                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">最小定量</label><span
+                            class="supply_1_li_text ">1</span></div>
+                    <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 ">2018-06-29</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">
+                    青神天香国色生态农业开发有限公司坐落于四川省眉山市青神县，我
+                    公司拥有完整科学的生产加工体系，拥有生态用地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>
+        </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>
+        <!-- 最新商机 -->
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup } from 'element-plus'
+
+// 选项卡 
+const supply_choice_1_num = ref(1)
+
+</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) {}
+</style>

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

@@ -0,0 +1,1467 @@
+<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>
+
+        <!-- 地区选择 -->
+        <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>
+                &gt;
+                <a class="categ_crumb_left_a" href="" title=""> 农副产品 </a>
+                &gt;
+                <span class="categ_crumb_left_text"> 皮毛畜禽 </span>
+            </div>
+            <!-- 当前位置 -->
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_right clearfix">
+                <div class="categ_crumb_right_text">当前商品所在地：</div>
+                <div class="categ_crumb_right_text hand">天津</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: 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>
+                </div>
+            </div>
+        </div>
+        <!-- 您可以选择以下详细地区 -->
+        <div class="categ_grey_box clearfix">
+            <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>
+            </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>
+                <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>
+                    <div class="categ_table_li">
+                        <NuxtLink class="categ_table_li_a" to="/xiangcunshangcheng/nongfuchanpin/gongying/1.html" 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>
+                        </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 
+                    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>
+        <!-- 点击排行 -->
+        <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>
+
+        
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup, 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
+        }
+    }, 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
+}
+
+</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;
+    }
+
+
+}
+
+</style>

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

@@ -0,0 +1,403 @@
+<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>
+        <!--子菜单和地区选择-->
+        <ShopSubMenu2></ShopSubMenu2>
+        <!-- 地区选择 -->
+        <div class="categ_crumb_box clearfix_2">
+            <!-- 当前位置 -->
+            <div class="categ_crumb_left">
+                <a class="categ_crumb_left_a" title=""> 当前位置： </a>
+                <NuxtLink
+                    :to="`/xiangcunshangcheng/index.html`"
+                    class="categ_crumb_left_a"
+                >
+                    乡村商城
+                </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" 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>
+                    <nuxt-link 
+                        to="/xiangcunshangcheng/nongfuchanpin/gongying/list-1.html"
+                        class="categ_head_a_more"
+                    >
+                        查看更多 &gt; 
+                    </nuxt-link>
+                </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>
+                    <nuxt-link 
+                        to="/xiangcunshangcheng/nongfuchanpin/qiugou/list-1.html"
+                        class="categ_head_a_more"
+                    >
+                        查看更多 &gt; 
+                    </nuxt-link>
+                </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
+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("错误位置：获得页面路径")
+}
+
+//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();
+
+//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 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
+        }
+    }, 100);
+}
+//点击下拉panel
+const categ_crumb_panel_focus_fun = () => {
+    if_categ_crumb_panel_click.value = true
+    if_categ_crumb_panel.value = true
+}
+//下拉panel失去焦点事件
+const categ_crumb_panel_blur_fun = () => {
+    if_categ_crumb_panel_click.value = false
+    if_categ_crumb_panel.value = false
+}
+
+
+//获得详细地址列表
+const cityName = ref('')
+const cityList = ref([])
+const chooseCityId = ref('')
+let getCityList = async (id) => {
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    console.log(id)
+    console.log(shengData)
+    if(shengData.code==200){
+        cityList.value = shengData.data;
+        cityName.value = shengData.data[0].pid_name;
+    }else{
+        ElMessage.error(shengData.message)
+    }
+}
+//初始化的时候先获取一下城市列表
+if(cityId.value != undefined){
+    getCityList(cityId.value);
+}
+//选择城市
+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 }
+    })
+}
+
+const pageDataType1 = ref([]);//供应数据
+const pageDataType2 = ref([]);//求购数据
+
+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();
+
+//每次路由一变化就重新请求数据
+watch(() => route.query.cityid, (newVal, oldVal) => {
+    if(newVal != undefined){
+        cityId.value = parseFloat(newVal)
+        getCityList(newVal)
+    }else{
+        cityList.value = []
+    }
+    pageSearch()
+})
+
+watch(() => route.query.catid, (newVal, oldVal) => {
+    pageSearch()
+})
+
+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_shopcategory_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/class.less';
+</style>

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

@@ -0,0 +1,1465 @@
+<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>
+
+        <!-- 地区选择 -->
+        <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>
+                &gt;
+                <a class="categ_crumb_left_a" href="" title=""> 农副产品 </a>
+                &gt;
+                <span class="categ_crumb_left_text"> 皮毛畜禽 </span>
+            </div>
+            <!-- 当前位置 -->
+            <!-- 当前商品所在地 -->
+            <div class="categ_crumb_right clearfix">
+                <div class="categ_crumb_right_text">当前商品所在地：</div>
+                <div class="categ_crumb_right_text hand">天津</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: 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>
+                </div>
+            </div>
+        </div>
+        <!-- 您可以选择以下详细地区 -->
+        <div class="categ_grey_box clearfix">
+            <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>
+            </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>
+                <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>
+                    <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">
+                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求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 
+                    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>
+        <!-- 点击排行 -->
+        <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>
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup, 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
+        }
+    }, 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
+}
+
+</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;
+    }
+
+
+}
+
+</style>

pages/xiangcunshangcheng/index.html.vue

@@ -0,0 +1,306 @@
+<template>
+    <ShopPageHead></ShopPageHead>
+    <main class="index_main" id="all_vue">
+        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
+        <ShopSubMenu></ShopSubMenu>
+        <section class="shop_1_box clearfix">
+            <div class="shop_2_left clearfix">
+                <div class="shop_2_left_name_box">
+                    <label class="shop_2_left_name">商城公告：</label>
+                    <span class="shop_2_left_name_box_a dot1" @click="ShowDialog = true">
+                        {{ DialogData.title }}
+                    </span>
+                </div>
+                <div class="shop_ul_img_1 clearfix">
+                    <ShopSwiperXcShop :data="boxData1_data1" :data2="boxData1_data2" :data3="boxData1_data3"></ShopSwiperXcShop>
+                </div>
+            </div>
+            <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 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 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 boxData3">
+                                <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>
+        </section>
+        <section class="shop_2_box clearfix">
+            <div class="shop_name_box">
+                <div class="shop_name">
+                    <span class="shop_name_box_a">为你精选</span>
+                </div>
+                <div class="shop_name_right">
+                </div>
+            </div>
+            <div class="shop_ul_img_3 clearfix">
+                <div class="shop_li_img_3" v-for="(item,index) in boxData4">
+                    <NuxtLink
+                        :to="getShopPathDetail1(item)"
+                        class="shop_li_img_3_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="">
+                        <div class="shop_li_img_3_dot2 dot2">
+                            {{ item.name }}
+                        </div>
+                        <div class="shop_li_img_3_hover" v-if="index == 0">
+                            <div class="shop_li_img_3_hover_dot1 dot1">
+                                {{ item.name }}
+                            </div>
+                        </div>
+                    </NuxtLink>
+                </div>
+            </div>
+        </section>
+        <section class="shop_3_box clearfix">
+            <div class="shop_name_box">
+                <div class="shop_name">
+                    <span class="shop_name_box_a">热门产品</span>
+                </div>
+                <div class="shop_name_right"></div>
+            </div>
+            <div class="shop_ul_img_3 clearfix">
+                <section class="shop_hot_door_box clearfix">
+                    <a class="shop_hot_door_a" href="javascript:void(0)" title="乡村商城热门产品">
+                        <img class="shop_hot_door_img" src="@/public/img/13.png" title="" alt="">
+                        <div class="shop_hot_door_left">
+                            <h4 class="shop_hot_door_h4">乡村商城热门产品</h4>
+                            <div class="shop_hot_door_title">性价比高</div>
+                            <div class="shop_hot_door_btn">点击查看</div>
+                        </div>
+                    </a>
+                </section>
+                <div class="shop_li_img_3" v-for="(per_obj, per_index) in 2" :key="per_obj" v-show="false">
+                    <!--占位-->
+                </div>
+                <div class="shop_li_img_3" v-for="item in boxData5">
+                    <NuxtLink
+                        :to="getShopPathDetail1(item)"
+                        class="shop_alert_img_li_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="item.name">
+                        <div class="shop_li_img_3_dot2 dot2">
+                            {{ item.name }}
+                        </div>
+                    </NuxtLink>
+                </div>
+            </div>
+        </section>
+        <section class="shop_4_box clearfix">
+            <div class="shop_name_box">
+                <div class="shop_name">
+                    <span class="shop_name_box_a">热搜商品</span>
+                </div>
+                <div class="shop_name_right"> </div>
+            </div>
+            <div class="shop_ul_img_3 clearfix">
+                <div class="shop_li_img_3" v-for="item in boxData6">
+                    <NuxtLink
+                        :to="getShopPathDetail1(item)"
+                        class="shop_li_img_3_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="item.name">
+                        <div class="shop_li_img_3_dot2 dot2">
+                            {{ item.name}}
+                        </div>
+                    </NuxtLink>
+                </div>
+            </div>
+        </section>
+        <!-- 最新发布 -->
+        <!-- 热搜商品 -->
+        <section class="shop_5_box 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="shop_ul_img_3 clearfix">
+                <div class="shop_li_img_3" v-for="item in boxData7" :key="per_obj">
+                    <NuxtLink
+                        :to="getShopPathDetail1(item)"
+                        class="shop_li_img_3_a"
+                        :title="item.name"
+                    >
+                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="item.name">
+                        <div class="shop_li_img_3_dot2 dot2">
+                            {{ item.name }}
+                        </div>
+                    </NuxtLink>
+                </div>
+            </div>
+            <!--热搜商品-->
+        </section>
+        <!-- 热搜商品 -->
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+
+    <!--公告弹出框-->
+    <el-dialog
+        v-model="ShowDialog"
+        :title="DialogData.title"
+        width="50%"
+        :before-close="handleClose"
+        center
+    >
+        <div v-html="DialogData.content" class="shop_notice_content"></div>
+    </el-dialog>
+</template>
+
+<script setup>
+//1.页面必备方法 start ---------------------------------------->
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup, ElMessage, ElDialog} from 'element-plus'
+const radio1 = ref('1')
+// vue选项卡	
+const choice_1_num = ref(1)
+//1.页面必备方法 end ---------------------------------------->
+
+//2.获得所有数据 start ---------------------------------------->
+//模块1 最新数据 轮埠图
+const boxData1_data1 = ref([])
+const boxData1_data2 = ref([])
+const boxData1_data3 = ref([])
+//模块2 供应商品
+const boxData2 = ref([])
+//模块3 求购商品
+const boxData3 = ref([])
+//模块4 为你精选
+const boxData4 = ref([])
+//模块5 热门产品
+const boxData5 = ref([])
+//模块6 热搜商品
+const boxData6 = ref([])
+//模块7 最新发布 图文
+const boxData7 = ref([])
+//公告
+const DialogData = ref("")
+const ShowDialog = ref(false)
+
+//创建请求数据json
+let getJson = [
+    {"level":"4,0,24"},//最新数据
+    {"level":"5,0,6"},//供应商品
+    {"level":"6,0,6"},//求购商品
+    {"level":"1,0,6"},//为你精选
+    {"level":"2,0,10"},//热门产品
+    {"level":"3,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) {
+        console.log(mkdata)
+        //最新数据1
+        for(let index in mkdata.data.goods[0]){
+            //取出前面15个放到boxData1中
+            if(index < 5){
+                boxData1_data1.value.push(mkdata.data.goods[0][index])
+            }else if(index >= 5 && index < 10){
+                boxData1_data2.value.push(mkdata.data.goods[0][index])
+            }else if(index >= 10 && index < 15){
+                boxData1_data3.value.push(mkdata.data.goods[0][index])
+            }
+        }
+        //最新数据2
+        boxData7.value = mkdata.data.goods[0];
+        //供应商品
+        boxData2.value = mkdata.data.goods[1];
+        //求购商品
+        boxData3.value = mkdata.data.goods[2];
+        //为你精选
+        boxData4.value = mkdata.data.goods[3];
+        //热门产品
+        boxData5.value = mkdata.data.goods[4];
+        //热搜商品
+        boxData6.value = mkdata.data.goods[5];
+        //通知公告
+        DialogData.value = mkdata.data.article;
+    } else {
+        ElMessage.error(mkdata.message)
+    }
+}
+getPageAllData();
+//2.获得所有数据 end ---------------------------------------->
+
+//3.广告 start ---------------------------------------->
+//获得所有广告
+let adImg1 = ref({})
+onMounted(async () => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+
+    //从客户端启动广告
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopcategory_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];
+})
+//3.广告 end ---------------------------------------->
+</script>
+
+
+<style lang="less" scoped>
+@import '@/assets/css/shop/index.less';
+</style>

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

@@ -0,0 +1,1431 @@
+<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>
+
+        <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>
+                &gt;
+                <a class="categ_crumb_left_a" href="" title=""> 搜索 </a>
+            </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>
+                        条
+                    </div>
+                </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>
+                    <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">
+                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求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 
+                    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>
+        <!-- 点击排行 -->
+        <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>
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup, 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
+        }
+    }, 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
+}
+
+</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;
+    }
+
+
+}
+
+</style>

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

@@ -0,0 +1,1431 @@
+<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>
+
+        <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>
+                &gt;
+                <a class="categ_crumb_left_a" href="" title=""> 搜索 </a>
+            </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>
+                        条
+                    </div>
+                </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>
+                    <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">
+                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求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 
+                    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>
+        <!-- 点击排行 -->
+        <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>
+    </main>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElRadio, ElRadioGroup, 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
+        }
+    }, 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
+}
+
+</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;
+    }
+
+
+}
+
+</style>

pages/xiangcunshangcheng/search/search.vue

@@ -0,0 +1,1384 @@
+<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>
+        
+        <!-- 地区选择 -->
+        <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>
+                &gt;
+                <a class="categ_crumb_left_a" href="" title=""> 搜索 </a>
+            </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>
+                        条
+                    </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>
+                </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>
+                    <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">
+                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求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="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>
+                        条
+                    </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>
+                </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>
+                    <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">
+                                        供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求信息/公司供求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>
+    </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
+        }
+    }, 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
+}
+
+</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) {}
+</style>