Merge remote-tracking branch 'origin/developerB' into developerB

src/main/resources/static/css/base/base.pc.css

@@ -26,6 +26,13 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .icon.shop .tips{position:absolute;top:-30px;left:0;white-space:nowrap;background-color:#666;border-radius:2px;line-height:30px;font-size:12px;color:#FFF;text-align:center;display:inline-block;opacity:0;transition:all 1s;padding:0 10px;font-style:normal}
 .icon.shop .tips:before{content:"";width:10px;height:10px;background:#666;position:absolute;bottom:-3px;left:17px;transform:rotate(45deg)}
 .icon.shop:hover .tips{opacity:1}
+.icon.comment:before {
+    width: 25px;
+    height: 25px;
+    background-position: -5px -333px;
+    position: absolute;
+    top: 35px
+}
 
 /* 头部 */
 .baseHeadTop{width:100%;font-size:14px;background:#FBFBFB}

src/main/resources/static/css/flea-market/form.css

@@ -0,0 +1,322 @@
+input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
+    -webkit-appearance: none !important;
+}
+.unlogin-wrapper {
+    width: 1000px;
+    margin: 0 auto;
+}
+.dark-grey {
+    color: #333333;
+}
+.main-color {
+    color: #E15616;
+}
+.red-color {
+    color: #E60F0F;
+}
+.form-title {
+    font-size: 16px;
+    font-weight: 600;
+    padding: 40px 0 20px 0;
+}
+.notice {
+    color: #E60F0F;
+    font-weight: bold;
+    margin-bottom: -20px
+}
+.notice img {
+    width: 20px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.notice span {
+    vertical-align: middle;
+}
+.unlogin-form {
+    color: #838383;
+    font-family: "microsoft yahei";
+}
+.unlogin-label {
+    vertical-align: top;
+    /*display: inline-block;*/
+    font-size: 14px;
+}
+.spacing {
+    letter-spacing: 1px;
+}
+.no-spacing {
+    letter-spacing: 1px;
+}
+.unlogin-item {
+    margin-top: 20px;
+    /*width: 80%*/
+}
+.border-grey {
+    border: 1px solid #EFEFEF;
+}
+.textarea-wrapper {
+    position: relative;
+    display: inline-block;
+    color: #666666;
+    line-height: 24px;
+    width: 666px;
+    font-size: 14px
+}
+.textarea-wrapper textarea {
+    width: 666px;
+    resize:none;
+    padding: 10px;
+    color: #333;
+    font-size: 14px;
+    background: #F6F6F6;
+    border-radius: 5px;
+}
+.textarea-wrapper textarea::-webkit-input-placeholder {
+    color: #999;
+}
+.textarea-wrapper textarea::-moz-placeholder {
+    color: #999;
+}
+.textarea-wrapper textarea::-ms-input-placeholder {
+    color: #999;
+}
+.textarea-wrapper span {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+}
+#word-limit {
+    font-size: 12px;
+}
+.mt-file-list .mark{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99999;
+}
+.mt-file-list .mt_tip{
+    position: absolute;
+    top: 39%;
+    right: -140px;
+    z-index: 99999;
+    color: #ff0000;
+    font-size: 12px;
+    display: none;
+    padding-right: 26px;
+    background: url("/web/login/img/icon-tips.png")right center no-repeat;
+}
+.file-input-list {
+    position: relative;
+    text-align: center;
+    margin-bottom: 15px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+.file-input-list, #file-input,.custom-pic {
+    width: 119px;
+    height: 119px;
+    background: #fff;
+    display: inline-block;
+    border-radius: 5px;
+}
+.file-input-list .cLicenseCon-img{
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 5px;
+}
+.file-input-list .add-pic {
+    width: 30px;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.file-input-list .add-text {
+    margin-top: 70%;
+    font-weight: bold;
+}
+.mt-file-list {
+    display: inline-block;
+}
+#file-input,.custom-pic {
+    opacity: 0;
+    left: 0;
+    top: 0;
+    position: absolute;
+}
+.file-input-item p {
+    /*padding-left: 112px;*/
+    font-size: 12px;
+    color: rgba(51,51,48,0.5);
+}
+.file-container, .file-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 2;
+}
+.mask-pop-box, .mask-pop-box-success {
+    display: inline-block;
+    padding: 10px;
+    background: rgba(52,52,52,1);
+    color: #fff;
+    font-size: 14px;
+    border-radius: 5px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    display: none;
+    z-index: 9999;
+    text-align: center;
+}
+.mask-pop-box .red-color, .mask-pop-box-success .red-color {
+    text-align: left;
+}
+.mask-pop-box-success #box-text-1 {
+    margin: 10px 0;
+}
+.mask-pop-box-success button {
+    width: 120px;
+    height: 37px;
+    color: #E15616;
+    margin: 10px 0;
+    border: 1px solid #E15616;
+    background: transparent;
+}
+.mask-pop-box-success button:active {
+    background: #E15616;
+    color: #fff;
+}
+.unlogin-form input[type="text"],.unlogin-form input[type="number"],
+.login-form input[type="text"], .login-form input[type="number"] {
+    width: 735px;
+    height: 36px;
+    color: #333330;
+    text-indent: 15px;
+    /*font-weight: bold;*/
+    font-size: 13px;
+    background: #F6F6F6;
+    border-radius: 5px;
+    border: 1px solid rgba(237,237,237,1)
+}
+.input-item .unlogin-label, .unlogin-address {
+    vertical-align: middle;
+}
+.unlogin-address {
+    display: inline-block;
+}
+.address-input {
+    min-width: 200px;
+    height: 36px;
+    line-height: 36px;
+    padding-right: 10px;
+    background: #fff;
+    font-size: 14px;
+    text-indent: 15px;
+    font-family: "microsoft yahei";
+    position: relative;
+    cursor: pointer;
+    border-radius: 5px;
+    background: #F6F6F6;
+}
+.arrow-icon {
+    width: 13px;
+    margin-left: 100px;
+}
+.address-block {
+    position: absolute;
+    top: 34px;
+    left: 0;
+    width: 400px;
+    background: #fff;
+    padding: 10px;
+    display: none;
+    z-index: 100;
+    box-shadow: 0 5px 10px #eee;
+}
+.address-details {
+    /*margin-left: 111px;*/
+    /*width: 383px !important;*/
+    margin-top: 20px;
+}
+.address-input:hover .address-block{
+    /*display: block;*/
+}
+.address-title {
+    border-bottom: 1px solid #EFEFEF;
+}
+.address-title li {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    white-space: nowrap;
+    text-align: center;
+}
+.address-content {
+    width: 100%;
+    position: absolute;
+    top: 47px;
+    left: 0;
+    text-align: left;
+    background: #fff;
+    box-shadow: 0 5px 10px #eee;
+    padding: 10px 0;
+}
+.address-content li {
+    float: left;
+    font-size: 12px;
+    font-weight: 500;
+}
+.address-title li:hover, .address-content li:hover {
+    color: #E15616;
+    cursor: pointer;
+}
+.btn-submit-btm {
+    width: 154px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    border: 1px solid #E15616;
+    background: #FAFAFA;
+    margin: 40px 0 89px 561px;
+    cursor: pointer;
+    font-size: 14px;
+}
+.shrink-spacing {
+    margin-top: 20px;
+    margin-bottom: 15px
+}
+
+/*login form*/
+#login-form-wrapper .mt-bottom{
+    width: 62%;
+    /*float: right;*/
+    margin: auto;
+}
+#login-form-wrapper #word-limit {
+    bottom: 10px;
+}
+
+ .Read  i{
+      background-image: url("/html/maintenance/img/box.png");
+        position: absolute;
+        z-index: 1;
+        left: 31%;
+        top: 39.2%;
+        width: 12px;
+        height: 12px;
+        overflow: hidden;
+        cursor: pointer
+        }
+       .Read input[type="checkbox"]{display:none;}
+       .Read input[type="checkbox"]:checked + i{
+        background-image: url("/html/maintenance/img/boxed.png");
+        }

src/main/resources/static/css/flea-market/intro.css

@@ -0,0 +1,369 @@
+  @media screen and (min-width:768px) {
+      .body {
+          position: relative;
+          width: 1190px;
+          margin: 20px auto 0;
+          background-image: url("/img/flea-market/zuhe23.png");
+          background-position: 85px 40px;
+          background-repeat: no-repeat;
+      }
+      body {
+          background-image: linear-gradient(#FF7676, #E15616);
+      }
+      .second-hand-wrapper h1 {
+          color: #FFFFFF;
+          letter-spacing: 2px;
+      }
+      #second-hand-btn {
+          position: relative;
+          width: 1160px;
+          background: #FFFFFF;
+          border-radius: 20px;
+          margin-top: 40px;
+          padding: 20px 40px 0 40px;
+          margin-bottom: 80px;
+          height: 273px;
+          border-bottom: 10px solid #f1ac90;
+          border-right: 10px solid #f1ac90;
+      }
+      #second-hand-btn button {
+          position: absolute;
+          width: 15%;
+          height: 40px;
+          background: linear-gradient(225deg, rgba(255, 107, 107, 1) 0%, rgba(247, 76, 0, 1) 100%);
+          border-radius: 5px;
+          color: #fff;
+          border: none;
+          top: 80px;
+          font-size: 17px;
+          outline: none;
+          cursor: pointer;
+          border-radius: 22px;
+      }
+
+      #second-hand-btn button:first-child {
+          left: 15%;
+      }
+
+      #second-hand-btn button:nth-child(2) {
+          left: 34%;
+      }
+
+      #second-hand-btn button:nth-child(3) {
+          left: 52%;
+      }
+
+      #second-hand-btn button:nth-child(4) {
+          left: 70%;
+      }
+
+      .top_title {
+          padding: 20px 0 20px 0;
+      }
+      .top_title img{width: 80px}
+      .top_title span {
+          color: #FFFFFF;
+      }
+
+      .top_text {
+          font-size: 64px;
+          color: #FFFFFF;
+          font-style: oblique;
+          font-weight: bold;
+          margin-top: 40px;
+      }
+
+      .mian_text {
+          margin-top: 80px;
+          width: 700px;
+          color: #FFFFFF;
+          font-size: 18px;
+      }
+
+      .mian_text h1 {
+          font-size: 36px;
+          font-weight: bold;
+          padding-bottom: 20px;
+      }
+
+      .mian_content {
+          margin-top: 80px;
+      }
+
+      .mian_content h1 {
+          font-size: 36px;
+          font-weight: bold;
+      }
+
+      .font_content {
+          width: 1160px;
+          background: #FFFFFF;
+          /*height: 590px;*/
+          border-radius: 20px;
+          margin-top: 40px;
+          padding: 20px;
+          font-weight: 400;
+          line-height: 32px;
+          color: rgba(109, 114, 120, 1);
+          opacity: 1;
+          position: relative;
+          border-bottom: 10px solid #f1ac90;
+          border-right: 10px solid #f1ac90
+      }
+
+      .content_list p {
+          font-size: 21px;
+          font-family: Source Han Sans CN;
+
+      }
+
+      .content_list span {
+          font-size: 18px;
+      }
+
+      .content_list {
+          margin-bottom: 20px;
+      }
+
+      .tishiyu {
+          background: #FFF8F8;
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          line-height: 32px;
+          color: #FF7354;
+          opacity: 1;
+          padding: 10px;
+          border-radius: 10px;
+          margin-top: 60px;
+      }
+
+      .twobuy {
+          background: #EF5C3C;
+          border-radius: 10px;
+          font-size: 18px;
+          font-family: AlibabaPuHuiTiB;
+          opacity: 1;
+          padding: 3px;
+          color: #FFFFFF;
+          margin-bottom: 20px;
+          text-align: center;
+          width: 250px
+      }
+
+      .threebuy {
+          background: #EF5C3C;
+          border-radius: 5px;
+          font-size: 18px;
+          color: #fff;
+          padding: 3px;
+          width: 590px;
+          text-align: center;
+          margin-bottom: 20px;
+      }
+
+      .bluefont {
+          font-size: 24px;
+          color: #0091FF
+      }
+
+      .foot_font {
+          width: 712px;
+          height: 40px;
+          margin: auto;
+          text-align: center;
+          margin-top: 180px;
+          font-size: 24px;
+      }
+
+      .yellow_icon {
+          width: 300px;
+          height: 20px;
+          background: rgba(250, 185, 0, 1);
+          opacity: 1;
+          margin-top: -27px;
+      }
+
+      .top_title div {
+          display: inline-block;
+      }
+  }
+
+
+
+/* 移动端*/
+@media screen and (max-width:768px){
+     .title{letter-spacing: .2rem;font-size: 0.48rem}
+     .second-hand-wrapper img{
+            width: 100%;
+            display: block;
+            margin: 0 auto;
+        }
+        #second-hand-btn button {
+            position: absolute;
+            width: 40%;
+            height: 20%;
+            background:linear-gradient(225deg,rgba(255,107,107,1) 0%,rgba(247,76,0,1) 100%);
+            border-radius:15px;
+            color: #fff;
+            border: none;
+            font-size: .3rem;
+            outline: none;
+        }
+        #second-hand-btn div{
+        height: 70px}
+        #second-hand-btn button:first-child, #second-hand-btn button:nth-child(3) {
+            left: 9%;
+        }
+        #second-hand-btn button:nth-child(2), #second-hand-btn button:nth-child(4) {
+            left: 52%;
+        }
+        #second-hand-btn button:nth-child(3), #second-hand-btn button:nth-child(4) {
+            top: 36%;
+        }
+         body{
+            position: relative;
+            margin: 20px auto 0;
+
+        }
+        .second-hand-wrapper{
+            background-image: url("/img/flea-market/bg22.png");
+            background-position: 50% 18%;
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+         body{
+            background-image: linear-gradient(#FF7676, #E15616);
+        }
+       .second-hand-wrapper h1{
+            color: #FFFFFF;
+            letter-spacing: 2px;
+       }
+        #second-hand-btn {
+            position: relative;
+            background: #FFFFFF;
+            border-radius: 0.4rem;
+            margin-top: 0.4rem;
+            padding: 20px 15px 0px 15px;
+            margin-bottom: .5rem;
+            border-bottom: 5px solid #f1ac90;
+            border-right: 5px solid #f1ac90;
+        }
+        .top_title{
+            padding: 20px 0 20px 0;
+            text-align: center;
+        }
+        .top_title h1{
+             letter-spacing: 3vw;
+             font-size: 5vw
+            }
+        .top_title img{width: 52px}
+        .top_title span{
+            color: #FFFFFF;
+            font-size: smaller;
+        }
+        .top_text{
+            font-size: 8vw;
+            color: #FFFFFF;
+            font-style: oblique;
+            font-weight: bold;
+            margin-top: 5.3vw;
+            text-align: center;
+        }
+        .mian_text{
+            margin-top: 10vw;
+            color: #FFFFFF;
+            font-size: 3vw;
+            padding: 0 4vw 0 4vw;
+            line-height: 5.3vw;
+            letter-spacing: .53vw
+        }
+        .mian_text h1{
+             font-size: 4.8vw;
+            font-weight: bold;
+            padding-bottom: 5vw
+        }
+        .mian_content.top{
+            margin-top: 66.7vw;
+        }
+        .mian_content h1{
+             font-size: 4.8vw;
+            font-weight: bold;
+        }
+        .font_content{
+             background: #FFFFFF;
+            border-radius: 0.4rem;
+            margin-top: 0.24rem;
+            padding: 0.2rem;
+            font-weight: 400;
+            line-height: 0.5rem;
+            color: rgba(109,114,120,1);
+            opacity: 1;
+            position: relative;
+            border-bottom: 5px solid #f1ac90;
+            border-right: 5px solid #f1ac90;
+        }
+        .content_list p{
+         font-size:.3rem;
+        font-family:Source Han Sans CN;
+
+        }
+        .content_list span{
+         font-size: .24rem;
+        }
+        .content_list{
+         margin-bottom: .3rem;
+        }
+        .tishiyu{
+         background: #FFF8F8;
+        font-size: 0.24rem;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        line-height: 20px;
+        color: #FF7354;
+        opacity: 1;
+        padding: 10px;
+        border-radius: 10px;
+        }
+        .twobuy{
+        background: #EF5C3C;
+         border-radius: 0.2rem;
+         font-size: 0.24rem;
+         font-family: AlibabaPuHuiTiB;
+         opacity: 1;
+         padding: 3px;
+         color: #FFFFFF;
+         /*letter-spacing: 0.1rem;*/
+         margin-bottom: 0.4rem;
+         text-align: center;
+         width: 3.3rem;
+        }
+        .threebuy{
+        background: #EF5C3C;
+        border-radius: 5px;
+        font-size: .24rem;
+        color: #fff;
+        padding: 3px;
+        margin-bottom: 0.2rem;
+        }
+        .bluefont{
+            font-size: .32rem !important;
+            color: #0091FF
+        }
+        .foot_font{
+            text-align: center;
+            font-size: 0.34rem;
+            line-height: 0.6rem;
+
+        }
+        .yellow_icon{
+             width: 42vw;
+            height: 2vw;
+            background: rgba(250,185,0,1);
+            opacity: 1;
+            margin-top: -3vw
+        }
+        .top_title div{
+            display: inline-block;
+        }
+}

src/main/resources/static/css/flea-market/list.css

@@ -0,0 +1,482 @@
+/**
+ * PC端
+ */
+  li {list-style: none;zoom: 1;}
+@media screen and (min-width:768px) {
+    #fleaMarketList {
+        margin-top: 20px
+    }
+    .ListImg img {
+        width: 100%
+    }
+
+    .secondTitle {
+        width: 1184px;
+        height: 40px;
+        background-color: #ffffff;
+        border-bottom: 1px solid #E15616;
+        margin-top: 20px
+    }
+
+    .ClassA {
+        width: 128px;
+        height: 40px;
+        display: inline-block;
+        text-align: center;
+        line-height: 40px;
+        font-size: 16px;
+        cursor: pointer;
+        color: #333333;
+        border: 0;
+    }
+
+    .active {
+        background: #E15621;
+        color: #fff;
+    }
+    .activeImg{
+        opacity: 0.5;
+    }
+
+    .fabu {
+        float: right;
+        text-align: center;
+        color: #e15616;
+        border-bottom: 1px solid #e15616;
+        height: 32px;
+        margin-right: 30px
+    }
+
+    .fabu a {
+        line-height: 40px;
+        color: #e15616
+    }
+
+    .mainTab {
+        background: #fff;
+        width: 128px;
+        position: absolute;
+        z-index: 1;
+    }
+
+    .Listitem:nth-of-type(4n) {
+        margin-right: 0;
+    }
+
+    .mainTab li {
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        color: #627386;
+        cursor: pointer;
+    }
+
+    .mainTab li.addstyle {
+        background: #ffe6dc;
+        color: #e15616;
+    }
+
+    .shopList {
+        width: 1184px;
+        margin: 20px auto;
+        font-size: 0;
+    }
+
+    .Listitem {
+        width: 284px;
+        display: inline-block;
+        margin: 0 16px 20px 0;
+    }
+
+    .itemImg {
+        position: relative;
+        width: 100%;
+        height: 284px;
+        margin-right: 20px;
+        background-color: #fff;
+        cursor: pointer;
+        background: #000
+    }
+
+    .itemImg .bigImg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .infotag {
+        font-size: 10px;
+        width: 58px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        display: inline-block;
+        border-radius: 2px;
+        flex: auto;
+        margin: 0 3px
+    }
+
+    .ItemInfo tag {
+        display: flex;
+    }
+
+    .infotag.news {
+        border: solid 1px #f94b4b;
+        color: #f94b4b;
+        background-color: #fadbdb
+    }
+
+    .infotag.brand {
+        border: solid 1px #f9a24b;
+        color: #f9a24b;
+        background-color: #faefdb;
+    }
+
+    .infotag.sold {
+        border: solid 1px #9aa5b5;
+        color: #9aa5b5;
+        background-color: #e3ebf7;
+    }
+
+    .infotag.other {
+        border: solid 1px #1890f9;
+        color: #1890f9;
+        background-color: #e3ebf7;
+    }
+
+    .ItemInfo {
+        background: #fff;
+        padding: 10px
+    }
+
+    .targetprice {
+        font-size: 16px;
+        color: #f94b4b;
+        cursor: pointer;
+    }
+
+    .productname {
+        font-size: 16px;
+        color: #22272e;
+        text-align: justify;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 8px 0;
+    }
+
+    .shijian {
+        font-size: 12px;
+        color: #9aa5b5;
+        text-align: justify;
+        margin: 8px 0;
+        position: relative;
+    }
+
+    .shijian div {
+        display: inline-block;
+    }
+
+    .shijian div:nth-child(1) {
+        margin-right: 60px
+    }
+
+    .dizhi {
+        font-size: 12px;
+        color: #9aa5b5;
+        margin-bottom: 8px;
+        position: relative;
+        margin-right: 20px
+    }
+     .icon.shijian:before {
+        background-position: -117px -328.5px;
+        width: 20px;
+        height: 23px;
+        position: absolute;
+        right: 3px;
+        top: -4px
+     }
+    .icon.liulanliang:before {
+        background-position: -187px -326.5px;
+        width: 20px;
+        height: 20px
+    }
+
+    .icon.dizhi:before {
+            background-position: -326px -326.5px;
+            width: 20px;
+            height: 23px;
+            position: absolute;
+            right: -20px;
+            top: -5px
+    }
+
+    .isShow {
+        display: block;
+    }
+
+    .no-content {
+        padding: 180px 0 160px;
+        background-color: #fff;
+        opacity: 0;
+    }
+
+    .no-content img {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .error-message {
+        font-size: 16px;
+        text-align: center;
+        margin-top: 50px;
+    }
+
+    .show {
+        opacity: 1 !important;
+    }
+
+    .page-area {
+        width: 1190px;
+        height: 60px;
+        padding-top: 20px;
+        font-size: 14px;
+        text-align: center;
+        clear: both;
+        background: #fff;
+        margin: 5px auto;
+    }
+
+    .page-area a {
+        border: 1px solid #EFEFEF;
+        color: #636262;
+        line-height: 14px;
+        padding: 4px 10px;
+        background: #fff;
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        vertical-align: inherit;
+    }
+
+    .page-area a:hover {
+        border: 1px solid #ccc;
+        color: #666;
+        text-decoration: none;
+    }
+}
+
+/* 移动端*/
+@media screen and (max-width:768px){
+#fleaMarketList{width: 100%;overflow: hidden}
+.shopList{background: #fff}
+.Listitem{height:33vw;padding: 10px;border-bottom: .24vw solid #F0F2F4}
+.ListImg{
+    width: 100%;
+    height: 35.3vw
+}
+.ListImg img {
+   width: 100%;
+   height: 100%;
+}
+ .secondTitle {
+        width: 100%;
+        height: 10vw;
+        background-color: #ffffff;
+        border-bottom: .24vw solid #F0F2F4;
+        position: relative
+    }
+
+    .ClassA {
+        width: 32vw;
+        height: 10vw;
+        display: inline-block;
+        text-align: center;
+        line-height: 10vw;
+        font-size: 3.86vw;
+        cursor: pointer;
+        color: #9aa5b5;
+        border: 0;
+        position: relative;
+    }
+     .mainTab {
+        background: #fff;
+        width: 29vw;
+        position: absolute;
+        z-index: 1;
+    }
+       .Listitem:nth-of-type(4n) {
+        margin-right: 0;
+    }
+
+    .mainTab li {
+        height: 9.6vw;
+        line-height: 9.6vw;
+        text-align: center;
+        color: #627386;
+        cursor: pointer;
+    }
+     .active {
+        color: #E15621;
+    }
+    .line{
+        width: 10vw;
+        margin:0 auto;
+        height: .48vw;
+        background-color: #e15616;
+        display: block
+    }
+    .mainTab li.addstyle{
+        color: #e15616;
+    }
+    .itemImg{
+        width:31.2vw;
+        height:31.2vw;
+        float: left;
+        background: #000;
+    }
+    .activeImg{
+        opacity: 0.5;
+    }
+    .itemImg img{
+        width: 100%;
+        height: 100%;
+    }
+    .ItemInfo{
+      float: right;
+     width: 60vw
+    }
+    .infotag {
+        font-size:  0.4vw;
+        width: 11.6vw;
+        height: 4.8vw;
+        line-height:  4.8vw;
+        text-align: center;
+        display: inline-block;
+        border-radius: .48vw;
+        flex: auto;
+        margin: 0 .72vw
+    }
+    .infotag.news {
+        border: solid 1px #f94b4b;
+        color: #f94b4b;
+        background-color: #fadbdb
+    }
+
+    .infotag.brand {
+        border: solid 1px #f9a24b;
+        color: #f9a24b;
+        background-color: #faefdb;
+    }
+
+    .infotag.sold {
+        border: solid 1px #9aa5b5;
+        color: #9aa5b5;
+        background-color: #e3ebf7;
+    }
+
+    .infotag.other {
+        border: solid 1px #1890f9;
+        color: #1890f9;
+        background-color: #e3ebf7;
+    }
+     .targetprice {
+        font-size: 4vw;
+        color: #f94b4b;
+        cursor: pointer;
+    }
+    .productname{
+        color: #627386;
+        letter-spacing: 1px;
+        font-size: 4vw;
+        margin: 1.2vw 0;
+    }
+    .shijian {
+        font-size: 3.46vw;
+        color: #9aa5b5;
+        text-align: justify;
+        margin-bottom: 1.2vw ;
+        position: relative;
+    }
+
+    .shijian div {
+        display: inline-block;
+    }
+
+    .shijian div:nth-child(1) {
+        margin-right:16vw;
+    }
+    .dizhi {
+        font-size:  3.46vw;
+        color: #9aa5b5;
+        margin-bottom: 1.2vw;
+        position: relative;
+        margin-right: 20px
+    }
+
+    .mIcon.liulanliang:before {
+        background-position: -28.8vw -15.5vw;
+        width: 5.3vw;
+        height: 5.3vw;
+    }
+
+    .mIcon.shijian:before {
+        background-position: -36.8vw -15.5vw;
+        width: 4.9vw;
+        height: 6vw;
+        position: absolute;
+        right: .24vw;
+        top: -1.45vw;
+    }
+    .mIcon.dizhi:before {
+        background-position: -87.7vw -38.4vw;
+        width: 5.3vw;
+        height: 5.3vw;
+        position: absolute;
+        right: -6vw;
+        top: -1.3vw
+    }
+    .mIcon.off:before{
+        background-position: -68vw .53vw;
+        width: 5.3vw;
+        height: 5.3vw;
+        position: absolute;
+        right: 5vw;
+        top: 1.7vw;
+    }
+    .mIcon.open:before{
+        background-position: -60.3vw .53vw;
+        width: 5.3vw;
+        height: 5.3vw;
+        position: absolute;
+        right: 5vw;
+        top: 1.7vw;
+    }
+    .no-content{
+        padding:26.6vw 5.3vw;
+        background-color: #fff;
+        margin: auto;
+        }
+   .no-content img{
+        width: 50%;
+        display: block;
+        margin: 0 auto;
+        padding: 0.5rem 0;
+        }
+   .error-message{
+        text-align: center;
+        margin-top: 5.3vw;
+        font-size: 3.7vw;
+        color: #53504D
+        }
+    .fabu{
+        background: #e15616;
+        height: 56px;
+        width: 100%;
+        text-align: center;
+        line-height: 56px;
+        font-size: 19px;
+        position: fixed;
+        bottom: 0;
+        z-index: 1
+    }
+    .fabu a{color: #fff}
+}

src/main/resources/static/css/flea-market/secondDetail.css

@@ -0,0 +1,630 @@
+.preview-container{
+    width: 100%;
+    height: auto;
+    background-color: #f6f6f6;
+    margin-bottom: 20px;
+}
+.preview-container-top{
+    width: 100%;
+    height: 80px;
+    background-color: #FFC684;
+    font-size: 30px;
+    color: #FFF;
+    line-height: 80px;
+    text-align: center;
+}
+.inner-container{
+    width: 1200px;
+    height: auto;
+    margin: 0 auto;
+}
+.preview-header{
+    width: 100%;
+    padding: 12px;
+    background-color: #FFFFFF;
+    margin: 10px 0 20px 0;
+}
+.preview-header .preview-banner{
+    width: 450px;
+    height: 548px;
+    float: left;
+    border:1px solid #EFEFEF;
+    position: relative;
+}
+.preview-header .preview-info{
+    width: 704px;
+    float: right;
+    opacity: 0;
+}
+.preview-header .preview-info.active{
+    opacity: 1;
+}
+.preview-header .preview-banner-big{
+    width: 448px;
+    height: 448px;
+    float: left;
+}
+.preview-header .preview-banner-big .preview-img{
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.preview-header .preview-banner-big span{
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 215px;
+    height: 215px;
+    border: 1px solid #aaa;
+    background: rgba(255,208,22,0.4);
+    opacity: .5;
+    filter: alpha(opacity: 50);
+    cursor: move;
+}
+.preview-header .preview-banner-small{
+    width: 100%;
+    height: 98px;
+    padding:  10px;
+    float: left;
+}
+.preview-header .preview-banner-small .item{
+    width: 78px;
+    height: 78px;
+    /*border: 2px solid #FFF;*/
+    margin-right: 9px;
+    float: left;
+    background-color: #fff;
+    cursor: pointer;
+}
+.preview-header .preview-banner-small .item:last-child{
+    margin-right: 0;
+}
+.preview-header .preview-banner-small .item img{
+    width: 100%;
+    height: 100%;
+    display: block;
+    -moz-transition: .5s;
+    -webkit-transition: .5s;
+    transition: .5s;
+}
+.preview-header .preview-banner-small .item.item-cur{
+    border-color: #e15616;
+}
+.preview-header .preview-banner-small .item.item-cur img{
+    opacity: 1;
+}
+.preview-header .preview-box{
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    right: -555px;
+    top: 0;
+    width: 548px;
+    height: 548px;
+    border: 1px solid #e4e4e4;
+    z-index: 9999;
+    background: #FFFFFF;
+}
+.preview-header .preview-box img{
+    width: 1096px;
+    height: 1096px;
+    margin-right: 10px;
+    display: block;
+}
+.preview-info .preview-info-title{
+    width: 100%;
+    height: auto;
+    float: left;
+    position: relative;
+}
+.preview-info .preview-info-title .info-p{
+    height: auto;
+    float: left;
+}
+.preview-info .preview-info-title .info-p.classly{
+    font-size: 14px;
+    color: #999;
+}
+.preview-info .preview-info-title .info-p.name{
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+    line-height: 24px;
+    height: auto;
+    width: 100%;
+    margin: 10px 0;
+}
+.preview-info .preview-info-title .info-p.label .label-s{
+    font-size: 12px;
+    background: #A69DFE;
+    color: #fff;
+    padding: 5px 10px;
+    border-radius: 2px;
+    margin: 0 10px 5px 0;
+    display: inline-block;
+}
+.preview-info  .preview-info-main{
+    width: 100%;
+    /*height: 326px;*/
+    padding:16px 20px;
+    background-color: #FDF8F6;
+    border-radius: 2px;
+    float: left;
+    margin-top: 15px;
+}
+.preview-info  .preview-info-main .info{
+    width: 50%;
+    height: 30px;
+    float: left;
+    margin-bottom: 5px;
+    line-height: 30px;
+}
+.preview-info  .preview-info-main .info .label{
+    width: 70px;
+    height: 30px;
+    float: left;
+    display: block;
+    font-size: 14px;
+    line-height: 30px;
+    text-align: right;
+    color: #999;
+}
+.preview-info  .preview-info-main .info p{
+    float: left;
+    height: 100%;
+    padding-left: 20px;
+}
+.preview-info  .preview-info-main .info.price .fave-tag{
+    width: 54px;
+    height: 22px;
+    display: inline-block;
+    border-radius: 2px;
+    background:linear-gradient(45deg,rgba(255,42,42,1) 0%,rgba(255,145,0,1) 100%);
+    box-shadow:0px 3px 6px rgba(255,145,0,0.17);
+    font-size: 14px;
+    text-align: center;
+    line-height: 22px;
+    color: #FFF;
+    float: left;
+    margin-right: 5px;
+    margin-top: 4px;
+}
+.preview-info  .preview-info-main .info.price .fave-text{
+     font-size: 14px;
+     color: #FF2A2A;
+ }
+.preview-info  .preview-info-main .info.price .fave-text .big{
+    font-size: 16px;
+}
+.preview-info  .preview-info-main .info.price .fave-text-none{
+    font-size: 14px;
+    color: #333;
+    text-decoration: line-through;
+}
+.preview-info  .preview-info-main .info .num-box{
+    width: 91px;
+    height: 24px;
+    border-radius: 4px ;
+    border: 1px solid #EEE;
+    float: left;
+    margin-top: 2px;
+    margin-left: 20px;
+}
+.preview-info  .preview-info-main .info .num-box span{
+    display: inline-block;
+    float: left;
+    line-height: 24px;
+    font-size: 14px;
+    text-align: center;
+    height: 24px;
+}
+.preview-info  .preview-info-main .info .num-box span:nth-child(2){
+    width: 45px;
+    border-right:1px solid #EEE;
+    border-left:1px solid #EEE;
+    color: #e15616;
+}
+.preview-info  .preview-info-main .info .num-box span:nth-child(1),
+.preview-info  .preview-info-main .info .num-box span:nth-child(3){
+    width: 22px;
+    color: #999;
+}
+.preview-info  .preview-info-main .info.sever{
+    margin-top: 10px;
+    border-top: 1px dashed #F9DDD0;
+    line-height: 40px;
+    height: 40px;
+}
+.preview-info  .preview-info-main .info.sever .label{
+    line-height: 40px;
+}
+.preview-info  .preview-info-main .info.sever .text{
+    padding-left: 24px;
+    background: url("/public/3.0/img/product/selected.png") left center no-repeat;
+    margin-right: 15px;
+}
+.preview-info  .preview-info-btn{
+    width: 100%;
+    height: 36px;
+    float: left;
+    margin-top: 20px;
+}
+.preview-info  .preview-info-btn .info-btn{
+    float: left;
+    width: 154px;
+    height: 36px;
+    float: left;
+    margin: 0 10px;
+    border-radius: 2px;
+    line-height: 36px;
+    text-align: center;
+    font-size: 14px;
+}
+.preview-info  .preview-info-btn .info-btn.buy{
+    background-color: #e15616;
+    color: #FFF;
+}
+.preview-info  .preview-info-btn .info-btn.cart{
+    background-color: #FFF;
+    color: #e15616;
+    border: 1px solid #e15616;
+}
+/*下半部分*/
+.preview-bottom{
+    width: 100%;
+    min-height:522px ;
+}
+.preview-bottom .preview-left{
+    width: 890px;
+    min-height:522px ;
+    float: left;
+    background: #fff;
+}
+.preview-bottom .preview-right{
+    width: 290px;
+    min-height:522px ;
+    float: right;
+}
+.preview-bottom .preview-left .preview-tabs{
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid #e15616;
+}
+.preview-bottom .preview-left .preview-tabs-item{
+    width: 128px;
+    height: 39px;
+    line-height: 39px;
+    background-color: #FFF;
+    font-size: 16px;
+    color:#333 ;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+}
+.preview-bottom .preview-left .preview-tabs-item.active{
+    background-color: #e15616;
+    color: #FFF;
+}
+.preview-bottom .preview-left .preview-section{
+    width: 100%;
+    height: auto;
+    padding:10px 20px;
+}
+.preview-bottom .preview-left  .preview-section-html{
+    width: 100%;
+    height: auto;
+}
+.preview-bottom .preview-left  .preview-section-html img{
+    width: 100%;
+    height: auto;
+    display: block;
+}
+.preview-bottom .preview-section .parameter-main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    background-color: #FFFFFF;
+    border: 1px solid #EFEFEF;
+    border-radius: 4px;
+}
+.preview-bottom .preview-section .parameter-main .item-tabody {
+    width: 100%;
+    height: auto;
+    border-bottom: 1px solid #EFEFEF;
+    font-size: 14px;
+    display: flex;
+    flex-wrap: wrap;
+}
+.preview-bottom .preview-section .parameter-main .item-td{
+    width: 238px;
+    float: left;
+    border-right: 1px solid #EFEFEF;
+    color: #999999;
+    padding:10px 20px;
+    display: flex;
+    flex: 2;
+    flex-direction: column;
+}
+.preview-bottom .preview-section .parameter-main .item-tr{
+    width: 462px;
+    float: left;
+    color: #333333;
+    padding:10px 20px;
+    display: flex;
+    flex: 8;
+    flex-direction: column;
+}
+.preview-bottom .preview-section .parameter-main .item-tr:last-child{
+    border-bottom: none;
+}
+.preview-bottom .preview-section .parameter-text{
+    width: 100%;
+    height: auto;
+    margin-bottom: 30px;
+}
+.preview-bottom .preview-section .parameter-text-title{
+    font-size: 16px;
+    color: #333;
+    line-height: 36px;
+    text-align: left;
+}
+.preview-bottom .preview-section .parameter-text-p{
+    font-size: 14px;
+    color: #999;
+    line-height: 24px;
+    text-align: justify;
+}
+.preview-bottom .preview-section .none{
+    font-size: 14px;
+    color: #e15616;
+    line-height: 36px;
+    text-align: center;
+}
+.preview-right .preview-shopinfo{
+    width: 100%;
+    height: auto;
+    background-color: #FFF;
+    margin-bottom: 20px;
+    float: left;
+}
+.preview-right .preview-shopinfo .title{
+    width: 100%;
+    padding: 0 15px;
+    height: 40px;
+    background-color: #FFA347;
+    line-height: 40px;
+    font-size: 16px;
+    color: #FFF;
+    float: left;
+}
+.preview-right .preview-shopinfo .shopinfo-main{
+    width: 100%;
+    padding: 0 15px;
+    background-color: #FFF;
+    float: left;
+}
+.preview-right .preview-shopinfo .shopinfo-main .name{
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid #f7f7f7;
+    float: left;
+    font-size: 16px;
+    color: #333;
+    line-height: 40px;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text{
+    width: 100%;
+    height: auto;
+    float: left;
+    margin-bottom: 10px;
+}
+.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text h1{
+    font-size: 14px;
+    color: #333;
+    font-weight: normal;
+    line-height: 24px;
+}
+.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text p{
+    font-size: 12px;
+    color: #666;
+    font-weight: normal;
+    line-height: 24px;
+}
+.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text .star{
+    width: 16px;
+    height: 16px;
+    display: block;
+    float: left;
+    margin: 0 4px;
+    background: url(/web/supplier/img/icon-star@2x.png)no-repeat center center;
+    margin-top: 4px;
+}
+.preview-right .preview-shopinfo .shopinfo-main .shopinfo-btn{
+    width:266px;
+    height:36px;
+    background:rgba(225,86,22,1);
+    opacity:1;
+    border-radius:2px;
+    margin: 0 auto;
+    font-size: 14px;
+    color: #FFFF;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+}
+.preview-right .preview-shopinfo .shopinfo-main .tel{
+    width: 120px;
+    height: 131px;
+    float: left;
+    padding-top: 30px;
+}
+.preview-right .preview-shopinfo .shopinfo-main .tel p{
+    font-size: 16px;
+    color: #333;
+    line-height: 24px;
+    text-align: left;
+}
+.preview-right .preview-shopinfo .shopinfo-main .tel-icon{
+    width:  131px;
+    height: 131px;
+    float: right;
+    background: url(/web/supplier/img/icon-tel.png)no-repeat center center;
+    background-size: contain;
+}
+.member-detail{
+    color:#999999 ;
+    font-size: 14px;
+}
+.loginWithParam {
+    color: #FC4444;
+    font-size: 14px;
+ }
+.dedArea-title {
+    padding: 10px 20px;
+    border-bottom: 1px solid #E15616;
+    font-size: 16px;
+}
+.recommended-item div {
+    width: 152px !important;
+    height: 153px;
+    margin-top: 10px;
+}
+.recommended-item img{
+    width: 100%;
+    height: 100%;
+}
+.recommended-item p{
+    color: #666666;
+}
+
+.main {
+    width: 1200px;
+    margin: 20px auto 0;
+}
+ .title{
+    width: 1200px;
+    line-height: 40px;
+    padding-left: 10px;
+    margin: 0 auto;
+    background-color: #fff;
+    font-size: 16px;
+    color: #333333;
+    border-bottom: 1px solid #E15616;
+    font-weight: bold;
+  }
+.mainContent{
+    width: 100%;
+    font-size: 0;
+}
+.mainContentLeft {
+    width: 1200px;
+    display: inline-block;
+    background-color: #fff;
+    vertical-align: top;
+}
+.Disclaimer {
+    padding: 20px 10px;
+    background-color: #fff;
+}
+.Disclaimer h3 {
+    font-size: 14px;
+    margin-bottom: 20px;
+    color: #333333;
+}
+.Disclaimer p {
+    font-size: 14px;
+    color: #999999;
+    padding: 0 10px
+}
+.contentHtml {
+    font-size: 14px;
+    padding: 0 20px 10px;
+    text-align: left;
+    width: 1200px;
+    margin: auto;
+}
+.contentHtml img {
+    display: block;
+    /*width: 100%;*/
+    /*height: 100%;*/
+    margin: 20px auto 0;
+    max-width: 100%;
+}
+.yishou_img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(-9%, 7%);
+    width: 15%;
+    opacity: 0;
+}
+.iconLogo {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #fff;
+    font-size: 14px;
+    padding: 5px 12px;
+    border-radius: 0 0 10px 0;
+}
+.brandMain {
+    position: absolute;
+    left: 30px;
+    top: 29px;
+    width: 90%;
+    padding: 15px;
+    border: 1px solid #F2F2F2;
+    border-radius: 10px;
+    background-color: #fff;
+    cursor: pointer;
+    line-height: 24px;
+    letter-spacing: 1.5px;
+}
+.Brand img {
+    vertical-align: -1px;
+    margin-left: 5px;
+}
+
+.zheng-graphics {
+    position: absolute;
+    left: 60px;
+    top: -9px;
+    width: 15px;
+    height: 15px;
+    background-color: #fff;
+    border: 1px solid rgba(234, 234, 234, 1);
+    /*box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);*/
+    transform: rotate(-45deg);
+    border-left: 0;
+    border-bottom: 0;
+    z-index: 1;
+}
+.brandMain:hover{
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.16);
+}
+.brandMain:hover .zheng-graphics{
+    box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);
+}
+
+.defaulImg div{
+    border: none;
+}
+.show{
+   opacity: 1 !important;
+}
+.ercode img{
+    opacity: 0;
+}
+.hoverBrand:hover .brandMain{
+   display: block;
+}
+.swiper-pagination{
+    bottom: 0 !important;
+}
+ .addImg{
+        border:1px solid #e15616;
+    }

src/main/resources/static/css/product/detail.pc.css

@@ -81,7 +81,7 @@ li{list-style:none;}
 .productInfo .tabCon td{padding:10px 12px;line-height:20px}
 .productInfo .tabCon td:nth-of-type(1){width:20%;color:#93979F}
 .productInfo .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
-.productInfo .comment{color:#93979F;padding:40px 0}
+.productInfo .comment{color:#93979F;padding:40px 0;margin-right: 30px; position: relative}
 
 .wrap>.rgt{float:right;width:284px}
 .wrap>.rgt .hd{height:40px;line-height:40px;padding:0 16px;font-size:18px;color:#fff;font-weight:bold;background:rgba(255,156,71,1)}
@@ -250,3 +250,29 @@ a.upgrade{
 .activityBox{
 left: 93px;
 }
+.commtext{
+    width: 700px;
+    height: 40px;
+    background-color: #ffffff;
+    border-radius: 2px;
+    border: solid 1px #b8bfca;
+    padding-left: 15px;
+    font-size: 16px
+}
+.pingjia{
+    margin-top: 25px;
+    text-align: left;
+}
+.pingjia button{
+    width: 128px;
+	height: 40px;
+	background-color: #4a4f58;
+	box-shadow: 0px 3px 6px 0px
+		rgba(147, 151, 159, 0.17);
+	border-radius: 2px;
+	color: #ffe6dc;
+}
+.comment-right{
+    float: right;
+    color: #93979f
+}

src/main/resources/static/js/flea-market/list.js

@@ -0,0 +1,139 @@
+var isPC = ($(window).width()>768);
+var fleaMarketList = new Vue({
+     el: "#fleaMarketList",
+     data:{
+     currentId:1,
+     currentID2:0,
+     isShow:false,
+     showflag:false,
+     mainflag:false,
+     userID:JSON.parse(localStorage.getItem('userInfo')),
+     tabTitle: [
+                {value:'1',name:'全部'},
+                {value:'2',name:'临期产品'},
+                {value:'3',name:'其他'}
+               ],
+      tabList : [
+                {value:'0',name:'全部'},
+                {value:'1',name:'轻光电'},
+                {value:'2',name:'重光电'},
+                {value:'3',name:'耗材配件'},
+           ],
+      listQuery:{
+                pageNum:1,
+                pageSize:12,
+            },
+      tabchildList:[],
+      productsList:[],
+      tabchild:{},
+      listRecord: 0,
+     pageInput: '1',
+      params:{},
+
+     },
+     computed: {
+          pageTotal: function () {
+                  var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+
+                  return total > 0 ? total : 1;
+            },
+           showPageBtn: function () {
+                var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+                    total = total > 0 ? total : 1;
+                var index = this.listQuery.pageNum, arr = [];
+                if (total <= 6) {
+                    for (var i = 1; i <= total; i++) {
+                        arr.push(i);
+                    }
+                    return arr;
+                }
+                if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+                if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+                return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+            },
+      },
+     methods:{
+       toPagination: function (pageNum) {
+          var _this = this;
+           _this.productsList = [];
+            if (pageNum <= this.pageTotal) {
+                _this.listQuery.pageNum = pageNum;
+                _this.gettabList()
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+         handle: function (item) {//一級分类
+               var _this = this;
+               _this.currentId = item.value;
+               _this.currentID2 = 0;
+               if ( _this.currentId==1){
+               _this.mainflag = true;
+               }else {
+               _this.mainflag=false;
+               }
+               _this.gettabList();
+          },
+           handleChild:function(item){ //二级分类
+               var _this = this;
+               _this.currentID2 = item.value;
+               _this.gettabList();
+          },
+           gettabList:function () {
+                var _this = this;
+                _this.returnedTarget();
+                var params = Object.assign({secondHandType: _this.currentId,instrumentType:_this.currentID2}, _this.listQuery);
+                SecondApi.SeconHandProductList(params,function (res) {
+                     if (res.code == 0) {
+                        console.log(res);
+                       if(res.data.results.length == 0){
+                            _this.tabchildList = [];
+                            _this.showflag = true;
+                             _this.listRecord = res.data.totalRecord;
+                       }else {
+                            _this.showflag = false;
+                            _this.isShow = true;
+                            _this.tabchildList = res.data.results;
+                            _this.listRecord = res.data.totalRecord;
+                       }
+                     }else{
+                     }
+                })
+          },
+          getproduct:function(id){
+            window.location.href = '/flea-market/secondDetail.html?productID='+id;
+            return false
+          },
+           returnedTarget:function(){//对象合并 IE 兼容方法
+            if (typeof Object.assign != 'function') {
+                Object.assign = function(target) {
+                    'use strict';
+                    if (target == null) {
+                        throw new TypeError('Cannot convert undefined or null to object');
+                    }
+                    target = Object(target);
+                    for (var index = 1; index < arguments.length; index++) {
+                        var source = arguments[index];
+                        if (source != null) {
+                            for (var key in source) {
+                                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                                    target[key] = source[key];
+                                }
+                            }
+                        }
+                    }
+                    return target;
+                };
+            }
+        }
+     },
+     mounted:function () {
+          var _this = this;
+          _this.gettabList()
+      },
+});

src/main/resources/static/js/flea-market/secondDetail.js

@@ -0,0 +1,159 @@
+/**
+ * Created by xw on 2020/7/22.
+ */
+var fleaMarket = new Vue({
+    el:"#fleaMarket",
+    data: {
+        tabIndex:0,
+        userId:'',
+        shopId:'',
+        id:window.location.href.split('=')[1],
+        isShow:false,
+        isRequest:false,
+        Showlogo:false,
+        detail:{},
+        previewBigimage:'',
+        previewThumb:[],
+        previewParams:[],
+        recommdeImage:[],
+        userID:JSON.parse(localStorage.getItem('userInfo')),
+        HandType:false,
+        ShowImage:false,
+        recommde:false,
+        soldImage:false,
+        vShow_brand:false,
+        bnameShow:false,
+        FlagTwo:false,
+        recommdeindex:0,
+        current:0,
+    },
+    computed: {
+
+    },
+    methods: {
+        InfoData: function(){
+          var  _this = this;
+          SecondApi.ProductDetail({productId:_this.id},function (res) {
+           if(res.code==0){
+                _this.isRequest =true;
+           }else {
+                _this.isRequest =false;
+           }
+             _this.detail = res.data;
+             _this.previewThumb =  res.data.imageList;
+             _this.previewBigimage =res.data.imageList[0];
+
+              if(_this.userID!=null){
+                if(res.data.secondHandType ==2){ //临期产品显示
+                   _this.HandType =true;
+                }else {
+                  _this.HandType =false;
+                }
+              }
+              if(res.data.showContactFlag!=2){
+                    _this.ShowImage=true;
+              }else {
+                    _this.ShowImage=false;
+              }
+              if(res.data.sold == 1){//sold是否出售 0未出售，1已出售
+                    _this.soldImage = true;
+                  }else {
+                    _this.soldImage = false;
+                  }
+             if(res.data.brandName !=''&& res.data.brandName!=null){
+                    _this.bnameShow = true;
+                if(res.data.brandID ==161){
+                    _this.vShow_brand = true;
+                }else {
+                    _this.vShow_brand = false;
+                }
+             }else {
+              _this.bnameShow = false;
+             }
+             if (res.data.detailTalkFlag ==1){ //是否详聊  1不开启，2开启
+                _this.FlagTwo==true;
+              }else {
+                _this.FlagTwo==false;
+             }
+             if(res.data.brandInfo==null||res.data.brandInfo==""){
+                _this.Showlogo = false;
+             }else {
+               _this.Showlogo = true;
+             }
+         })
+        },
+        changeActive:function(){
+        var _this = this;
+             _this.isShow = true;
+        },
+        removeActive:function(){
+         var _this = this;
+             _this.isShow = false;
+        },
+        ImgList:function(item,index){
+            var _this = this;
+            _this.current = index;
+            _this.previewBigimage = item;
+        },
+    },
+    mounted: function () {
+     var _this = this;
+        _this.InfoData();
+         SecondApi.ProductRecommend({productId:_this.id},function (res) {
+            if(res.code==0){
+              console.log(res)
+               if(res.data.length > 0){
+                       _this.recommdeImage = res.data;
+                       _this.recommde =true;
+                    }else {
+                       _this.recommde =false;
+                    }
+                    if(res.data.length<7){
+                        var length = 7-res.data.length;
+                        _this.recommdeindex = length;
+                    }else {
+                        var remainderres=res.data.length%7;
+                         _this.recommdeindex= 7-remainderres;
+                        console.log(_this.recommdeindex)
+                    }
+
+            }
+        });
+        SecondApi.ProductCount({productId: _this.id},function (res) {
+            if(res.code==0){
+                console.log(res)
+            }else {
+              console.log(res)
+            }
+        });
+        //相關推薦輪播
+        var mySwiper = new Swiper('.swiper-container',{
+                slidesPerView: 7,
+                spaceBetween: 18,
+                slidesPerGroup: 7,
+                autoplay: {
+                    delay:10000,
+                    disableOnInteraction: false,//是否禁止autoplay。默认为true：停止。
+                },
+                loop: false,
+                observer: true, //修改swiper自己或子元素时，自动初始化swiper
+                observeParents: true, //修改swiper的父元素时，自动初始化swiper
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true,
+                },
+                on:{
+                    init:function() {
+                        var length = this.slides.length;
+                        if(length < 8) {
+                            this.autoplay.stop();
+                        }
+                    }
+                }
+       })
+
+    }
+
+
+});
+

src/main/resources/templates/flea-market/form.html

@@ -12,10 +12,209 @@
 <!-- 二手商品发布 -->
 <div id="fleaMarketForm">
     <h1 style="text-align:center">二手商品发布（二期）</h1>
+<!--            <div class="my-maintenance" id="secondHandrelease">-->
+<!--            <div class="mt-top" style="background: #fff">-->
+<!--                <span class="mt-title">发布信息</span>-->
+<!--            </div>-->
+<!--            <div class="newsTitle">欢迎您来到采美365网二手商品市场，您可以在这里发布二手设备、产品信息，每个商品需要收取您100元的展示费，展示期为6个月；-->
+<!--                                   为了完整展示您的商品，请您认真填写以下内容，谢谢合作。</div>-->
+<!--            <div class="mt-bottom">-->
+<!--                <form id="mt-form" method="post"-->
+<!--                      enctype="multipart/form-data" class="login-form common-form">-->
+<!--                      <div class="unlogin-label spacing" style="letter-spacing: 1px;margin-right: 0"><span class="red-color">*</span>分类：</div>-->
+<!--                         <div class="buy-sell  the-oradio">-->
+<!--                              <div class="secondradio" v-for="(item,index) in fenlei" :key="index">-->
+<!--                                  <input type="radio"  v-model="secondParams.secondHandType" :id="secondHand(index)" :value="item.value"  @click="secondHandRidio(item.value)"/>-->
+<!--                                  <label :for="secondHand(index)" class="chexwords_radio"></label>{{item.name}}-->
+<!--                              </div>-->
+<!--                              <span class="release-tips" v-show="vShow_secondHandType">{{fromMessage}}</span>-->
+<!--                         </div>-->
+<!--                    <div class="clearfix second-form"  v-if="isShow">-->
+<!--                        <div v-for="(item ,index) in radioList" :key="index">-->
+<!--                        <a href="javascript:void(0);"  class="checkbix secondHand_checkbox"  :class="item.isChecked ? 'activebox':''" @click="secondHandType(item)"></a>{{item.name}}-->
+<!--<%&#45;&#45;                             <input  name="sort" :value="item.name"  :id="secondHand(index+10)" v-model="checkVal" type="checkbox" class="checkbix" @click="secondHandType(item.value)" /> {{item.name}}&#45;&#45;%>-->
+<!--<%&#45;&#45;                             <label :for="secondHand(index+10)"  class="secondHand_checkbox"></label>&#45;&#45;%>-->
+<!--                        </div>-->
+<!--                         <span class="release-tips" v-show="vShow_instrumentType">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                    <div class="linqi_text" v-show="secondParams.secondHandType==2">-->
+<!--                        <div class="jiaobiao"></div>-->
+<!--                        <p>临期产品是指临近保质期的产品，距离到期日最好在6个月以上</p>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品品牌：</div>-->
+<!--                        <select class="" id="shoplogo" data-flag="1" v-model="secondParams.brandID"  @change="ChangeBrand($event)">-->
+<!--                            <option value="">请选择</option>-->
+<!--                            <option  v-for="(item,index) in BrandList" :key="index" :value='item.id'>{{item.name}}</option>-->
+<!--                        </select>-->
+<!--                        <input type="text" v-show="shoplogoTwo" v-model="secondParams.brandName" maxlength="20" id="shoplogoTwo" class="border-grey" placeholder="请输入商品品牌">-->
+<!--                         <div class="release-tips" v-show="vShow_BrandID">{{fromMessage}}</div>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品名称：</div>-->
+<!--                        <input type="text" maxlength="40" v-model="secondParams.name" id="shopname" maxlength="40" class="border-grey" placeholder="请输入商品名称，不超过40个汉字"  >-->
+<!--                        <div class="release-tips" v-show="vShow_Name">{{fromMessage}}</div>-->
+<!--                    </div>-->
+<!--                      <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;">出厂日期：</div>-->
+<!--                        <input type="text" class="border-grey" v-model="secondParams.fixedYears" id="shopyear" maxlength="10" placeholder="请输入出厂日期 如：2020年06月">-->
+<!--                    </div>-->
+<!--                     <div class="unlogin-item input-item shrink-spacing"  v-show="secondParams.secondHandType==2">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>产品到期日：</div>-->
+<!--                        <input type="text" class="border-grey" v-model="secondParams.maturityYears" id="expire" maxlength="10" placeholder="请输入产品到期日，如：2020年12月">-->
+<!--                        <span class="release-tips" v-show="vShow_expire">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;">公司名称：</div>-->
+<!--                        <input type="text" class="border-grey" v-model="secondParams.companyName" id="mechanismname" maxlength="30" placeholder="请输入公司名称，不超过30个汉字">-->
+<!--                    </div>-->
+<!--                     <div class="unlogin-item input-item shrink-spacing" >-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>交易价：</div>-->
+<!--                        <input type="text" style="width: 288px;" maxlength="20" id="shopprice"   oninput="value=value.replace(/[^\d]/g, '')"-->
+<!--                           v-model="secondParams.price1" class="border-grey" placeholder="请输入交易价">-->
+<!--                        <label class="xiangliao" style="color: #E15616;;margin-left: 15px;position: relative;font-size: 14px">-->
+<!--                        <input type="checkbox" name="Detailed_chat" v-model="secondParams.detailTalkFlags" @click="Detailed($event)" id="Detailed"><label for="Detailed" class="transactionbox"></label>价格详聊</label>-->
+<!--                        <span class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</span>-->
+<!--                        <span class="release-tips" v-show="vShow_Price">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                     <div class="unlogin-item input-item shrink-spacing" v-show="secondParams.secondHandType==2">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>市场价：</div>-->
+<!--                        <input type="text" class="border-grey" v-model="secondParams.normalPrice" id="market" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')"   placeholder="请输入市场价">-->
+<!--                        <span class="release-tips" v-show="vShow_Market">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing" v-show="secondParams.secondHandType==2">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>采购价/原价：</div>-->
+<!--                        <input type="text" class="border-grey" v-model="secondParams.originalPrice" id="original_price" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入采购价/原价"/>-->
+<!--                        <span class="release-tips" v-show="vShow_original">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                     <div class="unlogin-item input-item shrink-spacing" v-show="secondParams.secondHandType==2">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>数量：</div>-->
+<!--                        <input type="text" class="border-grey" id="number" v-model="secondParams.stock" maxlength="30" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数量">-->
+<!--                       <span class="release-tips" v-show="vShow_Number">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品成色：</div>-->
+<!--                        <input type="text" maxlength="10" id="shopcolor"v-model="secondParams.productQuality" class="border-grey" placeholder="请输入商品成色，如“9成新”">-->
+<!--                        <span class="release-tips" v-show="vShow_shopColor">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>联系人：</div>-->
+<!--                        <input type="text" maxlength="6" v-model="secondParams.contactName" id="linkman" class="border-grey" placeholder="请输入联系人姓名">-->
+<!--                        <span class="release-tips" v-show="vShow_contactName">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item input-item shrink-spacing">-->
+<!--                        <div class="unlogin-label spacing"><span class="red-color">*</span>联系方式：</div>-->
+<!--                        <input type="text" class="border-grey" v-model="secondParams.contactMobile"  oninput="value=value.replace(/[^\d]/g,'')"  id="phoneNum" maxlength="11" placeholder="请输入联系人手机号 / 固话">-->
+<!--                        <span class="release-tips" v-show="vShow_contactMobile">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                     <div class="unlogin-item input-item shrink-spacing">-->
+<!--                            <div class="unlogin-label spacing">商品类型：</div>-->
+<!--                            <div class="buy-sell" style="display: inline-block">-->
+<!--                                <div class="buy" v-for="(item ,index) in beauty" :key='index' style="margin-right: 20px">-->
+<!--                                   <input name="Medicalbeauty" value="item.value" :id="Medicalbeauty(index+11)" style="margin-left: -15px"  @click="getProductType(item.value)"  type="radio"/> {{item.name}}-->
+<!--                                   <label :for="Medicalbeauty(index+11)" class="Medicalbeauty_radio"></label>-->
+<!--                                </div>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    <div class="unlogin-item input-item address-item shrink-spacing" id="Address">-->
+<!--                        <div class="unlogin-label spacing"><span class="red-color">*</span>联系地址：</div>-->
+<!--                    <select class="address-input reg-select province" name="provinceID" id="cProvince" @change="province" >-->
+<!--                        <option value="" >请选择</option>-->
+<!--                        <option v-for="(item ,index) in provinceArray" :key="index" :value='item.provinceID' >{{item.name}}</option>-->
+<!--                    </select>-->
+<!--                    <select class="address-input reg-select city" name="cityID" id="cCity" @change="getcity($event)" >-->
+<!--                        <option value="" >请选择</option>-->
+<!--                        <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID" >{{item.name}}</option>-->
+<!--                    </select>-->
+<!--                    <select class="address-input reg-select town" name="townID" id="cTown" @change="getcTown($event)">-->
+<!--                        <option value="" >请选择</option>-->
+<!--                        <option v-for="(item ,index) in townArray" :key="index" :value="item.townID"  >{{item.name}}</option>-->
+<!--                    </select>-->
+<!--                    <span class="release-tips" v-show="vShow_TownId">{{fromMessage}}</span>-->
+<!--                        <textarea type="text" id="addressDetails" class="border-grey address-details" v-model="secondParams.address" maxlength="50" placeholder="请填写详细地址，如街道/小区/门牌等" /></textarea>-->
+<!--                       <span class="release-tips" v-show="vShow_Address">{{fromMessage}}</span>-->
+<!--                    </div>-->
+
+<!--                    <div class="release-main-container">-->
+<!--                        <div class="release-from clearfix">-->
+<!--                            <div class="release-label"><span class="red-color" >*</span>商品图片:</div>-->
+<!--                            <div class="release-input upload image"  id="uploadGoodsImages">-->
+<!--                                <div class="upload-file"  v-for="(item, index) in GoodsImagesList" :key="index"-->
+<!--                                     draggable="true"-->
+<!--                                     class="items"-->
+<!--                                     @dragstart="dragstart(item)"-->
+<!--                                     @dragenter="dragenter(item)"-->
+<!--                                     @dragend="dragend(item)"-->
+<!--                                >-->
+<!--                                    <img :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" >-->
+<!--                                    <i class="icon-del" @click="removeGoodsImagesFn(index)"></i>-->
+<!--                                </div>-->
+<!--                                <div class="upload-file" v-show="GoodsImagesList.length<5">-->
+<!--                                    <i class="icon-add"></i>-->
+<!--                                    <p class="add-text">添加图片</p>-->
+<!--                                    <input ref="goodsImages" type="file" name="file" value="" class="input-file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadGoodsImagesFn">-->
+<!--                                </div>-->
+<!--                            </div>-->
+<!--                          <span class="release-tips" v-show="vShow_GoodsImages">{{fromMessage}}</span>-->
+<!--                    </div>-->
+<!--                        <p style="color: #333330;opacity: 0.5">最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</p>-->
+<!--                    </div>-->
+<!--                    <div class="unlogin-item">-->
+<!--                        <div class="unlogin-label spacing">商品详细信息：</div>-->
+<!--                        <div class="textarea-wrapper">-->
+<!--                            <textarea class="border-grey" maxlength="200" v-model="secondParams.productDetails"  cols="70" id="description" rows="6"  placeholder="请填写商品详细信息，对商品进行更详细的描述"></textarea>-->
+<!--                            <span id="word-limit">不超过200字</span>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                        <div class="unlogin-item">-->
+<!--                            <div class=" spacing" style=" margin-bottom: 12px;color: #333330;"><span class="red-color">*</span>免责声明：</div>-->
+<!--                            <div class="textarea-wrapper" style="letter-spacing: 1.5px">-->
+<!--                                鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，-->
+<!--                                由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。-->
+<!--                                本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    <%&#45;&#45;</div>&#45;&#45;%>-->
+<!--                          <div class="BtnAll" >-->
+<!--                            <label style=" margin-right: 10px;">-->
+<!--                             <div class="Read"> <input type="checkbox" @click="changeBox"/><i></i>已阅读</div>-->
+<!--                            </label>-->
+<!--                            <div class="btn-submit-btm main-color" id="btn-submit" @click="submitBtn">发布</div>-->
+<!--                        </div>-->
+<!--                </form>-->
+<!--                <div class="mask-pop-box1" style="display: none">-->
+<!--                    <div class="red-color">提示：</div>-->
+<!--                    <div id="box-text">文件大小不能超过100KB</div>-->
+<!--                </div>-->
+<!--                <div class="mask-pop-box-success">-->
+<!--                    <div class="red-color">提示：</div>-->
+<!--                    <div id="box-text-1">提交成功, 客服会在1-2个工作日内与您联系，请保持电话畅通</div>-->
+<!--                    <button id="btn-success" class="btn-success-login">确定</button>-->
+<!--                </div>-->
+<!--            </div>-->
+
+
+<!--            <div class="secondBj thebj"   v-show="vShow_secondBj" :class="vShow_secondBj?'show':''">-->
+<!--                <div class="bjmain theresult">-->
+<!--                    <h3>收费提示</h3>-->
+<!--                    <p>发布二手商品，采美需要收取您每个商品100元的展示费，展示期为6个月</br>-->
+<!--                        支付完成后，商品会在1-2个工作日内进行审核，审核通过后，商品会立即上线</p>-->
+<!--                    <div class="paybtn">-->
+<!--                        <span class="cancel closebtn" @click="gopay">去支付</span>-->
+<!--                        <span class="thegopay gozhofubao" @click="quxiao">取消，不发布了</span>-->
+<!--                    </div>-->
+<!--                    <div class="close closebtn" @click="quxiao"><img style="width: 15px" src="/html/maintenance/img/close.png"></div>-->
+<!--                </div>-->
+<!--            </div>-->
+
+<!--        </div>-->
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/second.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/list.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/flea-market/intro.html

@@ -4,18 +4,133 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
+        <link th:href="@{/css/flea-market/intro.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
 <!-- 二手市场介绍 -->
+<div class="body">
 <div id="fleaMarket">
-    <h1 style="text-align:center">二手市场介绍（二期）</h1>
-</div>
+      <div class="second-hand-wrapper">
+            <div class="top_title">
+                <div style="margin-right: 10px"> <img src="/img/flea-market/logo.svg" alt="" ></div>
+                <div>
+                    <h1>二手市场</h1>
+                    <span>SECOND-HANDMARKET</span>
+                </div>
+            </div>
+            <div class="top_text">
+                质量好一点，效率高一点
+            </div>
+            <div class="mian_text">
+                <h1>采美二手市场介绍<div class="yellow_icon"></div></h1>
+                <span>
+                    现实生活中，二手商品越来越经济实惠，二手商品也在多个经济生活领域出现。
+                    面对潜力巨大的二手市场，采美365网于2019年开办美容行业二手交易版块，搭建二手交易平台，
+                    将拥有闲置商品卖家与求购方（买家）信息集中起来，让交易双方的买卖信息传播得更广泛，交易更有保障。
+                </span>
+            </div>
+            <div class="mian_content top">
+                <h1>二手平台运营特色<div class="yellow_icon"></div></h1>
+                <div class="font_content">
+                    <div class="content_list">
+                        <p>1.自运营</p>
+                        <span>用户自主上传二手商品信息，自主销售，平台提供商品展示位以及商品信息介绍页面，类似“闲鱼”。</span>
+                    </div>
+                    <div class="content_list">
+                        <p>2.代运营</p>
+                        <span>由平台协助销售二手商品，为用户提供贴心且必要的推广辅助，促成交易。</span>
+                    </div>
+                    <div class="content_list">
+                        <p>3.第三方服务</p>
+                        <span>平台提供第三方服务，如申请第三方评测、延保、维修等，一方面更客观全面展示仪器细节，另一方面，便于仪器机能维护，方便维修等。</span>
+                    </div>
+                    <div class="content_list">
+                        <p>4.套餐服务</p>
+                        <span>多项组合套餐式服务，满足卖家个性化推广需求。</span>
+                    </div>
+                    <div class="tishiyu">转让方/出售方（以下统称为“卖家”）需上传个人真实信息，平台留存备案后，卖家通过平台专属页面上传需要出售的商品信息，（按后台系统要求填写）。</div>
+            </div>
+           </div>
+
+            <div class="mian_content">
+                <h1>合作模式<div class="yellow_icon" style="width: 150px !important;"></div></h1>
+            <div class="font_content">
+                <p class="twobuy">成为自由卖家：二手出售方</p>
+                  <div class="content_list">
+                    <p>1.自主发布</p>
+                    <span>平台已拥有独立上传信息页面，卖家可进入页面或者通过链接自主上传商品信息，获得在平台二手版块展示机会。平台收取展示位费用，详见第2条</span>
+                  </div>
+                  <div class="content_list">
+                    <p>2.自主发布</p>
+                    <span> 卖家每上传一款商品，占据一个展示位,<span class="bluefont">平台收取每款商品100元的展示费用 ，有效期为<span style="font-size: 48px">6</span>个月</span>
+                           平台提供与该商品匹配的详情信息以及文章信息，降低买家决策成本，以促进销售。特殊政策除外（如特定免费时段）。</span>
+                  </div>
+                   <div class="content_list">
+                    <p>3.平台推广服务(代运营)</p>
+                    <span> 卖家如需采美平台提供个性化推广服务，以帮助达成交易 ，平台收取一定服务费或佣金。</span>
+                  </div>
+                  <div class="content_list">
+                    <p>4.第三方检测、维修、延保服务</p>
+                    <span> 平台收取服务佣金。 </span>
+                  </div>
+                  <div class="content_list">
+                      <p>5.套餐服务</p>
+                      <span>多项组合服务。</span>
+                  </div>
+            </div>
+            </div >
 
+            <div class="mian_content">
+                <h1>交易流程<div class="yellow_icon" style="width: 150px !important;"></div></h1>
+                <div class="font_content">
+                 <div class="content_list">
+                    <span>随着越来越多机构青睐性价比高的二手设备，采美二手市场也越来越火热，为了保障买卖双方利益和资金交易安全，
+                    采美现将二手仪器交易的流程更加规范化，以促进二手市场的健康发展。</span>
+                 </div>
+                    <p class="threebuy">此流程适用于10万以下的设备，10万以上二手设备交易请联系高先生。</p>
+                    <span style="color: #353C44;font-size: 24px">具体的流程如下：</span>
+                    <img src="/img/flea-market/jiaoyi.png" style="margin-top: 10px"  v-if="isPC">
+                    <img src="/img/flea-market/jiaoyi3x.png" v-else>
+                </div>
+            </div>
+            <div id="second-hand-btn" >
+                <button>去发布</button>
+                <button>逛二手市场</button>
+                <button>去维修</button>
+                <button >去首页</button>
+            <div class="foot_font">
+                <span style="color: #ADADAD"> 业务咨询/合作请联系：</span><span style="color: #666666"> 0755 22907771  </span><span style="color: #ADADAD;">手机：</span><span style="color: #666666">15817465281</span>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+
 </body>
+<script>
+  var isPC = ($(window).width()>768);
+     $(document).ready(function() {
+
+        $('#second-hand-btn button').on('click',function() {
+            var index = $(this).index();
+            if(index == 0) {
+                window.location.href = '/flea-market/form.html';
+            } else if(index == 1) {
+                window.location.href = '/flea-market/list.html';
+            } else if(index == 2) {
+                window.location.href = '/repair.html';
+            } else {
+                window.location.href = '/index.html';
+            }
+
+        })
+    });
+
+</script>
 </html>

src/main/resources/templates/flea-market/list.html

@@ -4,6 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/flea-market/list.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
@@ -11,11 +12,92 @@
 
 <!-- 二手商品列表 -->
 <div id="fleaMarketList">
-    <h1 style="text-align:center">二手商品列表（二期）</h1>
+    <div class="wrap">
+        <div class="ListImg" >
+            <img src="/img/flea-market/banner.png"/>
+       </div>
+       <template>
+           <ul class="secondTitle " v-if="isPC">
+                <li class="ClassA icon "  v-for="(item, index) in tabTitle" :key="index" @click="handle(item)" :class="[currentId==item.value?'active':'',item.value==1?'jqSelect':'']">{{item.name}} </li>
+                <li class="fabu"><a href="/flea-market/form.html">我要发布</a><li/>
+           </ul>
+           <ul class="secondTitle" v-else>
+               <li class="ClassA  mIcon"  v-for="(item, index) in tabTitle" :key="index" @click="handle(item)" :class="[currentId==item.value?'active':'',item.value==1?'off':'']">{{item.name}}
+                <span class="line" v-if="currentId==item.value"></span>
+               </li>
+               <li class="fabu"><a href="/flea-market/form.html">我要发布</a><li/>
+           </ul>
+       </template>
+
+
+
+       <ul class="mainTab"  v-if="mainflag">
+           <li v-for="(item,index) in tabList" @click='handleChild(item)' :class="currentID2 ==index?'addstyle':' '" >{{item.name}}</li>
+
+       </ul>
+       <div class="shopList">
+            <div class="Listitem" v-if="isShow"   v-for="(item, index) in tabchildList">
+                <div class="itemImg onhref" :data-id="item.productID" @click="getproduct(item.productID)">
+                    <img :src="item.imageList[0]" :class="item.sold==1?'activeImg':''" class="bigImg">
+                </div>
+            <div class="ItemInfo" >
+                 <div class="tag">
+                   <span class="infotag news" v-if="item.sold==0&&item.newAdded==1">最新</span>
+                   <span class="infotag brand" v-if="item.brandName==null&&item.brandName==''">{{item.brandName}}</span>
+                   <span class="infotag sold" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0">已售</span>
+                   <span class="infotag other" v-if="item.brandID==161&&item.brandName!=''">其它</span>
+                  </div>
+                  <div class="productname">
+                    {{item.name}}
+                  </div>
+                  <div class="targetprice">
+                    <span v-if="item.detailTalkFlag ==2 && userID==null">价格详聊</span>
+                    <span v-else-if="userID==null" class="priceparam" @click="toLogin">登录查看价格></span>
+                    <span v-else-if="userID!=null && item.detailTalkFlag==2">价格详聊</span>
+                    <span v-else>￥{{item.price1Str}}</span>
+                  </div>
+                  <div class="shijian">
+                        <div ><i class="icon mIcon  liulanliang"></i> {{item.viewingNum}}</div>
+                        <div><i class="icon mIcon  shijian"></i> {{item.onLineDateStr}}</div>
+                   </div>
+                  <div class="dizhi">
+                    <i class="icon mIcon dizhi"></i>
+                     {{item.provinceCityDistrict}}
+                  </div>
+            </div>
+          </div>
+             <div class="no-content" v-show="showflag" :class="showflag?'show':''">
+               <img src="/img/flea-market/nologo.png" v-if="isPC"/>
+               <img src="/img/flea-market/kong_m.png" v-else />
+               <div class="error-message">
+                 <p>此分类下面没有商品，换其它分类瞅瞅</p>
+               </div>
+           </div>
+
+
+       </div>
+    </div>
+    <div  class="pageWrap clear" v-if="isPC">
+            <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+            <template v-for="n in showPageBtn">
+                <a v-if="n" :class="{ 'on': (n==listQuery.pageNum) }" @click="toPagination(n)" href="javascript:void(0);">{{ n }}</a>
+                <template v-else>···</template>
+            </template>
+            <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)"href="javascript:void(0);"> </a>
+            <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+            <span>跳至</span>
+            <input v-model="pageInput" @blur="checkNum()"/>
+            <span>页</span>&nbsp;
+              <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+        </div>
+
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/second.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/list.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/flea-market/secondDetail.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/head-link"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 二手市场介绍 -->
+<!--    <div class="preview-container" id="fleaMarket" >-->
+<!--    <div class="inner-container">-->
+<!--        <div class="preview-header clearfix">-->
+<!--            <div class="preview-banner clearfix">-->
+<!--                <div class="preview-banner-big">-->
+<!--                    <img class="preview-img" :src="previewBigimage" >-->
+<!--                    <span class="hover"></span>-->
+<!--                </div>-->
+<!--                  <div class="iconLogo"  v-if="detail.brandName==null||detail.brandName==''" ></div>-->
+<!--                  <div class="iconLogo"  v-else-if="detail.brandID==161&&detail.brandName"  style="background:rgba(225,86,22,0.5)" >{{detail.brandName}}</div>-->
+<!--                  <div class="iconLogo"  v-else style="background: rgba(22,116,225,0.5);">{{detail.brandName}}</div>-->
+<!--                <div class="preview-banner-small" id="CM____pic_thumb">-->
+<!--                    <ul class="preview-thumb-ul">-->
+<!--                        <li class="item" v-for="(item, index) in previewThumb"  :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">-->
+<!--                            <img :src="item">-->
+<!--                        </li>-->
+<!--                    </ul>-->
+<!--                </div>-->
+<!--                <div class="preview-box" id="mag">-->
+<!--                    <div class="bigitem">-->
+<!--                        <img id="magnifierImg" :src="previewBigimage"/>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--            </div>-->
+<!--            <div class="preview-info clearfix" v-show="isRequest" :class="isRequest?'active' : ''">-->
+<!--                <div class="preview-info-title">-->
+<!--                    <span class="hoverBrand"  >-->
+<!--                    <p class="info-p brandName" v-show="bnameShow" style="color: #999999">品牌：{{detail.brandName}}</p>-->
+<!--                    <span class="Brand" style="padding: 15px" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="Showlogo"><img src="/html/secondHand/img/logo.png"/> </span>-->
+<!--                    </span>-->
+<!--                     <p class="info-p name">{{detail.name}}</p>-->
+<!--                    <div class="brandMain" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="isShow" v-if="detail.brandInfo!=null||detail.brandInfo !=''"><div class="zheng-graphics"></div>{{detail.brandInfo}}</div>-->
+<!--                    <img src="/html/secondHand/img/yishou.png" class="yishou_img" v-if="soldImage" :class="soldImage?'show':''">-->
+<!--                </div>-->
+<!--                <div class="preview-info-main clearfix">-->
+<!--                    <div class="info price" style="width: 100%" >-->
+<!--                        <span class="label">交&nbsp;&nbsp;易&nbsp;&nbsp;价：</span>-->
+<!--                        <p>-->
+<!--                            <span v-if="detail.detailTalkFlag==2&&userID==null" class="fave-text">价格详聊</span></span>-->
+<!--                            <span v-else-if="userID==null"><a class="member-detail ladder-a loginWithParam" >登录查看价格></a></span>-->
+<!--                            <span v-else-if="userID!=null&&detail.detailTalkFlag==2" class="fave-text">价格详聊</span></span>-->
+<!--                            <span v-else class="fave-text">￥<span class="big">{{detail.price1Str}}</span></span>-->
+
+<!--                        </p>-->
+<!--                    </div>-->
+<!--                     <div class="info " v-if="HandType">-->
+<!--                        <span class="label">市&nbsp;&nbsp;场&nbsp;&nbsp;价：</span>-->
+<!--                        <p>{{detail.normalPriceStr}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info " v-if="HandType">-->
+<!--                       <span class="label" style="width: 90px">采购价/原价：</span>-->
+<!--                        <p>{{detail.originalPriceStr}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info " v-if="HandType">-->
+<!--                       <span class="label" style="width: 84px">产品到期日：</span>-->
+<!--                        <p>{{detail.maturityYears}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info bind">-->
+<!--                       <span class="label">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</span>-->
+<!--                        <p>{{detail.typeStr}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info ">-->
+<!--                       <span class="label">所&nbsp;&nbsp;在&nbsp;&nbsp;地：</span>-->
+<!--                        <p>{{detail.provinceCityDistrict}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info ">-->
+<!--                       <span class="label">商品成色：</span>-->
+<!--                        <p>{{detail.productQuality}}</p>-->
+<!--                    </div>-->
+<!--                     <div class="info " v-if="detail.showContactFlag==2">-->
+<!--                       <span class="label">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>-->
+<!--                        <p>{{detail.contactName}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info unit" v-if="detail.fixedYears!='' && detail.fixedYears!=null">-->
+<!--                        <span class="label">出厂日期：</span>-->
+<!--                        <p>{{detail.fixedYears}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info unit" v-if="detail.showContactFlag==2">-->
+<!--                        <span class="label">联系方式：</span>-->
+<!--                        <p>{{detail.contactMobile}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info price" style="width: 100%" v-if="HandType">-->
+<!--                        <span class="label">库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存：</span>-->
+<!--                        <p>{{detail.stock}}</p>-->
+<!--                    </div>-->
+<!--                    <div class="info price" v-if="detail.productType!=null && detail.productType!=''">-->
+<!--                        <span class="label">商品类型：</span>-->
+<!--                        <p v-if="detail.productType==1">医美</p>-->
+<!--                        <p v-else>非医美</p>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <div class="ercode" v-if="ShowImage" ><img :class="ShowImage?'show':''" src="/html/secondHand/img/er.png"/></div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--            &lt;!&ndash;  相关推荐 &ndash;&gt;-->
+<!--    <div class="product-recommended-area" v-show="recommde" >-->
+<!--        <div class="product-recommen dedArea-title">相关推荐</div>-->
+<!--        <div class="swiper-container" id="swiper-recommended">-->
+<!--            <div class="swiper-wrapper recommend-bananr">-->
+<!--                <div class="swiper-slide recommended-item" v-for="(item,index) in recommdeImage">-->
+<!--                    <a :href="'/html/secondHand/secondDetail.jsp?id='+item.recommendProductID" v-if="item.productCategory==2">-->
+<!--                        <div>-->
+<!--                            <img :src="item.mainImage" alt="">-->
+<!--                        </div>-->
+<!--                        <p>{{item.name}}</p>-->
+<!--                    </a>-->
+<!--                     <a :href="'/product-'+item.recommendProductID+'.html'" v-else>-->
+<!--                        <div>-->
+<!--                            <img :src="item.mainImage" alt="">-->
+<!--                        </div>-->
+<!--                        <p>{{item.name}}</p>-->
+<!--                    </a>-->
+<!--                </div>-->
+<!--                <div class="swiper-slide recommended-item defaulImg" v-for="(item,index) in recommdeindex">-->
+<!--                    <a href="javascript:0">-->
+<!--                        <div>-->
+<!--                            <img src="/html/maintenance/img/default.png" alt="">-->
+<!--                        </div>-->
+<!--                    </a>-->
+<!--                </div>-->
+<!--            </div>-->
+<!--            <div class="swiper-pagination recommended-pagination"></div>-->
+<!--        </div>-->
+<!--    </div>-->
+
+<!--     <div class="main">-->
+<!--        <div class="title">商品详情</div>-->
+<!--        <div class="mainContent">-->
+<!--            <div class="mainContentLeft">-->
+<!--                <div class="Disclaimer">-->
+<!--                    <h3 >免责声明:</h3>-->
+<!--                    <p>-->
+<!--                        鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！-->
+<!--                    </p>-->
+<!--                </div>-->
+<!--                <div class="contentHtml">-->
+<!--                    {{detail.productDetails}}-->
+<!--                       <div style="margin:auto"  v-for="(item, index) in previewThumb" :key="index" :data-src="item">-->
+<!--                           <img :src="item"/>-->
+<!--                       </div>-->
+<!--                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--      </div>-->
+
+<!--    </div>-->
+<!--</div>-->
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/second.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/secondDetail.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/product/detail.html

@@ -305,6 +305,15 @@
                     <div class="item" th:utext="${product.serviceInfo}"></div>
                 </div>
                 <div class="item">
+                <div style="text-align: left;margin: 10px 0">
+                        <span>商品评分：</span>
+                        <i th:each="i:${#numbers.sequence(1,5)}" class="icon comment"></i>
+                        <span class="comment-right">评价（）</span>
+                    </div>
+                    <div class="pingjia">
+                        <input type="text" class="commtext"   placeholder="对已购商品进行评论！"/>
+                        <button>评价</button>
+                    </div>
                     <p class="comment">该商品暂无评价!</p>
                 </div>
             </div>