二手发布

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

@@ -1,201 +1,202 @@
-body{background: #fff}
-.errcolor{border: 1px solid red}
- @media screen and (min-width:768px) {
-     .footTop{float: left;}
-     .footMain{float: left;}
-     #secondHandrelease {width: 1184px;margin: auto;}
-     .bannerimg{width: 100%;height: auto;}
-     .bannerimg img{width: 100%;height: 100%;}
-     .mt-top {line-height: 105px;letter-spacing: 0px;color: #22272e;text-align: center;font-size: 32px;font-weight: bold;height: 105px}
-     .newsTitle {height: 60px;line-height: 30px;background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(225, 86, 22, .1), rgba(255, 255, 255, 0));text-align: center;padding: 7px 157px;color: #FF5B00}
-     .mt-bottom {width: 44%;margin: 20px auto;}
-     #mt-form {position: relative;}
-     .secondradio div {width: 154px;height: 36px;line-height: 36px;background-color: #ffffff;border: solid 1px #b8bfca;text-align: center;display: inline-block;cursor: pointer;position: relative;color: #627386;}
-     .secondradio div:nth-child(2) {margin: 0 20px;}
-     .secondradio div.active {color: #FF5B00;border: solid 1px #FF5B00;}
-     .secondradio div.buy {width: 180px;}
-     .icon.select:before {background-position: -207px -254px;width: 22px;height: 19px;position: absolute;bottom: 0;left: 133px}
-     .icon.buy:before {left: 159px;}
-     .secondradio {margin-bottom: 15px;}
-     .secondradio div.typelist{width: 110px;height: 36px;line-height: 16px;box-sizing: border-box;padding: 10px 0; background-color: #ffffff;border: none;display: inline-block;cursor: pointer;position: relative;color: #627386;}
-     .secondradio .typelist .radio{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: left;}
-     .secondradio .typelist.checked .radio{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-     .secondradio .typelist .rtext{display: block;float: left;margin-left: 8px;}
-     .linqi_text {width: 425px;height: 45px;background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17);text-align: center;line-height: 45px;color: #ffffff;margin: auto}
-     .jiaobiao {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;top: 74px;right: 50%;border-bottom: 10px solid #1890f9;position: absolute}
-     #shoplogo {height: 36px;border-radius: 2px;padding-left: 10px;width: 508px;border: solid 1px #b8bfca;color: #9aa5b5}
-     #shoplogoTwo {height: 36px;margin-top: 10px;}
-     .login-form input[type="text"] {width: 496px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;padding-left: 10px;color: #22272e;}
-     .login-form input.code{width: 300px;}
-     input[type="text"]::placeholder, textarea::placeholder {color: #9aa5b5;;}
-     .red-color {color: #f94b4b;}
-     .address-input {width: 155px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;padding-left: 10px;color: #9aa5b5;}
-     .address-input.city {margin: 0 18px;}
-     .border-grey {width: 496px;height: 114px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;margin-top: 20px;resize: none;padding: 10px}
-     #description {margin-top: 0;}
-     .upload-file {position: relative;float: left;margin: 10px 10px 10px 0px;cursor: pointer;width: 80px;height: 80px;border-radius: 2px;border: solid 1px #b8bfca;}
-     .upload-file-view{width: 100%;height: 36px;position: relative;}
-     .upload-file-view .del:before{cursor: pointer;}
-     .login-form input.upload-file-name{ width: 100%;box-sizing: border-box;}
-     .input-file {width: 80px;height: 80px;opacity: 0;cursor: pointer;position: absolute;}
-     .input-file-btn {width: 90px;height: 34px;cursor: pointer;position: absolute;	background-color: #ffe6dc;border-radius: 2px;border: solid 1px #FF5B00;text-align: center;line-height: 36px;font-size: 14px;color: #FF5B00;top: 0;right: 0;}
-     .input-file-btn input{width: 90px;height: 36px;opacity: 0;cursor: pointer;position: absolute;top: 0;left: 0;z-index: 999;}
-     .upload-img {width: 100%;height: 100%;display: block;border-radius: 2px;}
-     .add-text {font-size: 12px;color: #333330;opacity: 0.5;position: absolute;top: 60%;right: 13px}
-     .release-main-container {width: 100%;height: auto;float: left;}
-     #uploadGoodsImages {width: 496px;}
-     .icon.add:before {width: 25px;height: 25px;background-position: -168px -374px;position: absolute;top: 17px;right: 24px;}
-     .icon.del:before {width: 20px;height: 20px;background-position: -116px -138px;position: absolute;top: -3px;right: -3px;}
-     .form-upload-tips .icon-wen:before {width: 20px;height: 20px;background-position: -84px -144px;cursor: pointer;}
-     .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -15px;left: 35px;}
-     .form-upload-tips {width: 20px;height: 90px;float: left;position: relative;margin-top: 10px;}
-     .wen-tips {width: 462px;height: 46px;line-height: 46px;text-align: center;color: #FFF;font-size: 14px;background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17);position: absolute;bottom: 10px;left: -32px;border-radius: 3px;display: none;}
-     .form-upload-tips:hover .wen-tips {display: block;}
-     #word-limit {position: absolute;right: 0;bottom: 10px;font-size: 12px;color: #9aa5b5}
-     .unlogin-item {margin-bottom: 20px;width: 100%;float: left;}
-     .unlogin-item.none {margin-bottom: 0;}
-     .getCode{box-sizing: border-box;width: 168px;height: 36px;margin-right: 15px;float: right; line-height: 34px;text-align: center;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #FF5B00;color: #FF5B00;font-size: 14px;}
-     .getCode.disabled{background-color: #D6D6D6;border-color: #D6D6D6;color: #FFFFFF;}
-     .textarea-wrapper {letter-spacing: 1.5px;line-height: 24px;color: #627386;position: relative;width: 496px;}
-     .release-button {width: 100%;height: auto;float: left;margin: 50px 0;}
-     .release-button .text{width: 100%;text-align: center;margin: 15px 10px;}
-     .release-button .buttton-main{width:300px;margin: 0 auto;}
-     .release-button button {width: 300px;height: 50px;border-radius: 2px;line-height: 50px;text-align: center;font-size: 18px;cursor: pointer;}
-     .Read {border: solid 1px #FF5B00;background-color: #ffe6dc;color: #FF5B00;float: left;position: relative;}
-     #btn-submit {background-color: #FF5B00;color: #fff;float: right;}
-     input[type=checkbox] {margin-right: 10px;}
-     select {appearance: none;-moz-appearance: none;-webkit-appearance: none;}
-     .icon.brand:before {width: 25px;height: 25px;background-position: -87px 11px;position: absolute;right: 15px}
-     .icon.selected:before {width: 25px;height: 25px;background-position: -87px 11px;position: absolute;right: 15px}
-     .icon.province:before {left: 125px;}
-     .icon.cCity:before {right: 195px;}
-
-     /**/
-     .select {position: relative;display: block;width: 508px;color: #22272e;vertical-align: middle;text-align: left;height: 36px;user-select: none}
-     .select .placeholder {position: relative;display: block;padding-left: 10px;border-radius: 2px;cursor: pointer;border: solid 1px #b8bfca;height: 36px;line-height: 36px}
-     .select.is-open .placeholder:after {content: '\f077';}
-     .select.is-open ul {display: block;}
-     .select.select--white .placeholder {background: #fff;color: #999;}
-     .select.select--white .placeholder:hover {background: #fafafa;}
-     .select ul {position: absolute;overflow: hidden;width: 100%;background: #fff;border-radius: 2px;top: 100%;left: 0;list-style: none;margin: 2px 0 0 0;padding: 0;z-index: 100;border: solid 1px #b8bfca;max-height: 350px;overflow: auto;}
-     .select ul li {display: block;text-align: left;padding: 0.8em 1em 0.8em 1em;color: #999;cursor: pointer;}
-     .select ul li:hover {background-color: #ffe6dc;color: #FF5B00}
-     .release-tips {display: block;height: 20px;line-height: 20px;white-space: nowrap;color: red;font-size: 12px}
-     .icon.errTips:before {width: 20px;height: 20px;background-position: -172px -296px;vertical-align: top;}
-     .thebj {position: fixed;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);z-index: 999999;opacity: 0;}
-     .thebj.show {opacity: 1;}
-     .theresult {position: fixed;left: 50%;top: 50%;margin-top: -150px;margin-left: -243px;width: 400px;background-color: #fff;border-radius: 2px;height: auto;padding-bottom: 20px;}
-     .theresult p:nth-child(1) {color: #627386;}
-     .theresult p {font-size: 14px;color: #22272e;line-height: 25px;padding: 15px 15px 0;}
-     .paybtn {font-size: 0;width: 100%;box-sizing: border-box;padding: 0 20px;}
-     .paybtn span {display: inline-block;text-align: center;margin: 15px 0 0 10px;font-size: 14px;cursor: pointer;float: right;}
-     .paybtn .cancel {border-right: 1px solid #F2F2F2;height: 32px;background: rgba(225, 86, 22, 1);color: #fff;line-height: 32px;border-radius: 2px;padding: 0 10px;}
-     .paybtn .thegopay {border: 1px solid #E0E0E0;height: 32px;line-height: 32px;border-radius: 2px;color: #333333;padding: 0 10px;}
-     .gosecond {color: #1683E1;border-right: 1px solid #F2F2F2;}
-     .close {position: absolute;right: 0;top: 0;width: 40px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;font-size: 24px;}
-     .bjmain .title{width: -webkit-fill-available;color: #627386;padding: 15px;display: inline-block;border: solid 1px #e2e7ef;font-size: 14px}
-     .unlogin-label{height: 26px;color:#627386}
-     .release-label{color: #627386}
- }
-
-/*移动端*
-
- */
- @media screen and (max-width:768px){
-  #secondHandrelease {padding: 2.7vw;}
-    .bannerimg  img{width: 100%;height: 100% ;}
-     .mt-top {line-height: 11vw;color: #22272e;text-align: left;font-size: 5vw;font-weight: bold;height: 11vw}
-     .newsTitle {line-height: 6vw;text-align: left;color: #FF5B00;padding: 2.7vw;background-color: rgba(225, 86, 22, .1)}
-     .mt-bottom {margin: 5.3vw auto;}
-     #mt-form {position: relative;overflow: hidden;width: 93.4vw;margin: auto}
-     .unlogin-label {width: 100%;margin-bottom: 2.7vw;color: #627386;}
-     .secondradio div {width: 27vw;height: 10.7vw;line-height: 10.7vw;background-color: #ffffff;border: solid .27vw #b8bfca;text-align: center;display: inline-block;cursor: pointer;position: relative;color: #627386}
-     .secondradio div:nth-child(2) {margin: 0 5.3vw;}
-     .secondradio div.active {color: #FF5B00;border: solid .27vw #FF5B00;}
-     .secondradio div.buy {width: 39.2vw;}
-     .mIcon.select:before {background-position: -75.5vw -8.8vw;width: 5.3vw;height: 4.8vw;position: absolute;bottom: 0;right: 0;transition: none;}
-     .mIcon.buy:before {left: 34vw;}
-     .secondradio {margin-bottom:4vw;}
-     .secondradio div.typelist{width: 27vw;height: 36px;line-height: 16px;box-sizing: border-box;padding: 1.5vw 0; background-color: #ffffff;border: none;display: inline-block;cursor: pointer;position: relative;color: #627386;}
-     .secondradio .typelist .radio{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: left;}
-     .secondradio .typelist.checked .radio{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-     .secondradio .typelist .rtext{display: block;float: left;margin-left: 8px;}
-     .linqi_text {width: 100%;height:9.6vw;background-color: #1890f9;box-shadow: 0px .8vw 1.3vw 0px rgba(24, 144, 249, 0.17);text-align: center;line-height: 9.6vw;color: #ffffff;margin: auto;font-size: 3.2vw;}
-     .jiaobiao {width: 0;height: 0;border-left: 2.7vw solid transparent;border-right: 2.7vw solid transparent;top: 20.8vw;right: 50%;border-bottom: 2.7vw solid #1890f9;position: absolute}
-     #shoplogoTwo {height:9.6vw;margin-top: 2.7vw;}
-     .login-form input[type="text"] {width: 100%;height: 9.6vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;padding-left: 2.7vw;color: #22272e;box-sizing: border-box}
-     input[type="text"]::placeholder, textarea::placeholder {color: #9aa5b5;;}
-     .login-form input.code{width: 60vw;}
-     .getCode{box-sizing: border-box;width: 30vw;height: 9.6vw;float: right; line-height: 9.6vw;text-align: center;background-color: #ffe6dc;border-radius:.53vw;border: solid 1px #FF5B00;color: #FF5B00;font-size: 3.2vw;}
-     .getCode.disabled{background-color: #D6D6D6;border-color: #D6D6D6;color: #FFFFFF;}
-     .shrink-spacing {margin: 5.3vw 0;position: relative;}
-     .red-color {color: #f94b4b;}
-     .address-input {width: 28.5vw;height: 10.7vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;padding-left: 6.7vw;color: #9aa5b5}
-     .address-item i{position: relative;}
-     .address-input.city {margin: 0 2.6vw;}
-     .border-grey {width: 100%;height: 40vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;margin-top: 5.3vw;resize: none;padding: 2.7vw;box-sizing: border-box}
-     .border-grey.address-details{height: 25vw;}
-     #description {margin-top: 0;}
-     .upload-file {position: relative;float: left;margin: 2.7vw 2.7vw 2.7vw 0px;cursor: pointer;width: 21.3vw;height: 21.3vw;border-radius: .53vw;border: solid .27vw #b8bfca}
-     .login-form input.upload-file-name{ width: 100% !important; padding: 0 2.7vw;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
-     .input-file {width: 21.3vw;height: 21.3vw;opacity: 0;cursor: pointer;position: absolute;}
-     .input-file-btn {width: 33.6vw;height: 9vw;box-sizing: border-box; cursor: pointer;position: absolute;	background-color: #ffe6dc;border-radius: 2px;border: solid 1px #FF5B00;text-align: center;line-height: 9vw;font-size: 14px;color: #FF5B00;right: 0;top: 7.5vw;}
-     .input-file-btn input{width: 33.6vw;height: 9.6vw;opacity: 0;cursor: pointer;position: absolute;top: 0;left: 0;z-index: 999;}
-     .upload-img {width: 100%;height: 100%;display: block;border-radius: .53vw;}
-     .add-text {font-size: 3.2vw;color: #333330;opacity: 0.5;position: absolute;top: 60%;right:3.3vw}
-     .release-main-container {overflow: hidden;}
-     #uploadGoodsImages {width: 100%;overflow: auto;}
-     .mIcon.add:before {width: 6.7vw;height: 6.7vw;background-position: -8.8vw -61vw;position: absolute;top: 4.5vw;right: 7.2vw}
-     .mIcon.del:before {width: 5.3vw;height: 5.3vw;background-position: -89.6vw -7.7vw;position: absolute;top: -0.8vw;right: -0.8vw}
-     .mIcon.del.file:before {width: 5.3vw;height: 5.3vw;background-position: -89.6vw -7.7vw;position: absolute;top: 10vw;right: 2vw}
-     .form-upload-tips .icon-wen:before {width: 5.3vw;height: 6.3vw;background-position: -76.5vw 0px;cursor: pointer;}
-     .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 2.1vw;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -4vw;left: 27.2vw;}
-     .form-upload-tips {width: 5.3vw;float: left;margin-top: 2.7vw;}
-     .wen-tips {width: 100%;height: 12.5vw;line-height: 6.4vw;text-align: center;color: #FFF;font-size: 2.7vw;background-color: #1890f9;box-shadow: 0 .8vw 1.6vw 0 rgba(24, 144, 249, 0.17);position: absolute;right: 0;border-radius: .8vw;display: none;}
-     .form-upload-tips:hover .wen-tips {display: block;}
-     #word-limit {position: absolute;right: 2.7vw;bottom: 2.7vw;font-size: 3.2vw;color: #9aa5b5}
-     .textarea-wrapper {letter-spacing: .4vw;line-height: 6.4vw;color: #627386;position: relative;width: 100%;font-size: 3.2vw}
-     .release-button .text{width: 100%;text-align: center;margin: 15px 10px;}
-     .release-button .buttton-main{width:100vw;margin: 0 auto;}
-     .release-button {width: 100%;height: auto;float: left;margin: 8vw 0;}
-     .release-button button {width: 100%;height: 12vw;border-radius: .53vw;line-height: 12vw;text-align: center;font-size: 4.5vw;cursor: pointer;box-sizing: border-box;}
-     .Read {border: solid .27vw #FF5B00;background-color: #ffe6dc;color: #FF5B00;}
-     #btn-submit {background-color: #FF5B00;color: #fff;}
-     input[type=checkbox] {margin: 1.27vw 7px 0px -3.4vw;width: 3.5vw;height: 3.5vw;line-height: 3.5vw}
-     select {appearance: none;-moz-appearance: none;-webkit-appearance: none;}
-     .mIcon.selected:before {width: 6.7vw;height: 6.7vw;background-position: -49vw 2.4vw;position: absolute;right: -27vw}
-     .mIcon.province:before {right: -26.4vw;}
-     .mIcon.cCity:before {right: -28.8vw;}
-
-     /**/
-     .select {position: relative;display: block;width: 100%;color: #9aa5b5;vertical-align: middle;text-align: left;height: 9.6vw;user-select: none}
-     .select .placeholder {position: relative;display: block;padding-left: 2.7vw;border-radius: .53vw;cursor: pointer;border: solid .27vw #b8bfca;height:9.6vw;line-height: 9.6vw}
-     .select.is-open .placeholder:after {content: '\f077';}
-     .select.is-open ul {display: block;}
-     .select.select--white .placeholder {background: #fff;color: #999;}
-     .select.select--white .placeholder:hover {background: #fafafa;}
-     .select ul {position: absolute;width: 99.5%;background: #fff;border-radius: .53vw;top: 100%;left: 0;list-style: none;border: solid 1px #b8bfca;max-height: 93.3vw;overflow: auto;z-index: 1;}
-     .select ul li {display: block;text-align: left;padding: 0.8em 1em 0.8em 1em;color: #999;cursor: pointer;}
-     .select ul li:hover {background-color: #ffe6dc;color: #FF5B00}
-     .release-tips {display: block;height: 5.3vw;line-height: 5.3vw;white-space: nowrap;color: red;font-size:3.2vw;margin-top: 1.7vw;}
-     .mIcon.errTips:before {width: 5.3vw;height: 5.3vw;background-position: -25.9vw -8.8vw;vertical-align: top;}
-     .thebj {position: fixed;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);z-index: 999999;opacity: 0;}
-     .thebj.show {opacity: 1;}
-     .theresult {position: absolute;right: 14%;top: 30%;width: 63.7vw;background-color: #fff;border-radius: .53vw;padding: 2.7vw;}
-     .theresult span{padding: 1.3vw 0;border-bottom: .27vw solid #e2e7ef;width: 100%;display: block;color: #627386}
-     .theresult p {font-size: 3.7vw;color: #22272e;line-height: 6.7vw;padding: 2vw 2vw}
-     .paybtn {width: 100%;}
-     .paybtn span {display: block;text-align: center;font-size: 3.7vw;cursor: pointer;}
-     .paybtn .cancel {margin: 2.7vw 0;width: 100%;height: 9.9vw;background: rgba(225, 86, 22, 1);color: #fff;line-height: 9.9vw;border-radius: .53vw;box-sizing: border-box;}
-     .paybtn .thegopay {border: .27vw solid #E0E0E0;height: 9.9vw;line-height: 8.5vw;border-radius: .53vw;color: #333333;padding: 0 1.3vw 0 1.3vw;box-sizing: border-box;}
-     .gosecond {color: #1683E1;border-right: .27vw solid #F2F2F2;}
-     .close {position: absolute;right: 0;top: 0;width: 10.7vw;height: 10.7vw;line-height: 10.7vw;text-align: center;cursor: pointer;font-size: 6.4vw;}
-    .brand.mIcon:before{
-    width: 5.3vw;
-    height: 5.3vw;
-    background-position: -51.2vw -.27vw;
-    position: absolute;
-    top: 2vw;
-    right: 2.7vw
-}
- }
+body{background: #fff}
+.errcolor{border: 1px solid red}
+ @media screen and (min-width:768px) {
+     .footTop{float: left;}
+     .footMain{float: left;}
+     #secondHandrelease {width: 1184px;margin: auto;}
+     .bannerimg{width: 100%;height: auto;}
+     .bannerimg img{width: 100%;height: 100%;}
+     .mt-top {line-height: 105px;letter-spacing: 0px;color: #22272e;text-align: center;font-size: 32px;font-weight: bold;height: 105px}
+     .newsTitle {height: 60px;line-height: 30px;background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(225, 86, 22, .1), rgba(255, 255, 255, 0));text-align: center;padding: 7px 157px;color: #FF5B00}
+     .mt-bottom {width: 44%;margin: 20px auto;}
+     #mt-form {position: relative;}
+     .secondradio div {width: 154px;height: 36px;line-height: 36px;background-color: #ffffff;border: solid 1px #b8bfca;text-align: center;display: inline-block;cursor: pointer;position: relative;color: #627386;}
+     .secondradio div:nth-child(2) {margin: 0 20px;}
+     .secondradio div.active {color: #FF5B00;border: solid 1px #FF5B00;}
+     .secondradio div.buy {width: 180px;}
+     .icon.select:before {background-position: -207px -254px;width: 22px;height: 19px;position: absolute;bottom: 0;left: 133px}
+     .icon.buy:before {left: 159px;}
+     .secondradio {margin-bottom: 15px;}
+     .secondradio div.typelist{width: 110px;height: 36px;line-height: 16px;box-sizing: border-box;padding: 10px 0; background-color: #ffffff;border: none;display: inline-block;cursor: pointer;position: relative;color: #627386;}
+     .secondradio .typelist .radio{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: left;}
+     .secondradio .typelist.checked .radio{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+     .secondradio .typelist .rtext{display: block;float: left;margin-left: 8px;}
+     .linqi_text {width: 425px;height: 45px;background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17);text-align: center;line-height: 45px;color: #ffffff;margin: auto}
+     .jiaobiao {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;top: 74px;right: 50%;border-bottom: 10px solid #1890f9;position: absolute}
+     #shoplogo {height: 36px;border-radius: 2px;padding-left: 10px;width: 508px;border: solid 1px #b8bfca;color: #9aa5b5}
+     #shoplogoTwo {height: 36px;margin-top: 10px;}
+     .login-form input[type="text"] {width: 496px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;padding-left: 10px;color: #22272e;}
+     .login-form input.code{width: 300px;}
+     input[type="text"]::placeholder, textarea::placeholder {color: #9aa5b5;;}
+     .red-color {color: #f94b4b;}
+     .address-input {width: 155px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;padding-left: 10px;color: #9aa5b5;}
+     .address-input.city {margin: 0 18px;}
+     .border-grey {width: 496px;height: 114px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;margin-top: 20px;resize: none;padding: 10px}
+     #description {margin-top: 0;}
+     .upload-file {position: relative;float: left;margin: 10px 10px 10px 0px;cursor: pointer;width: 80px;height: 80px;border-radius: 2px;border: solid 1px #b8bfca;}
+     .upload-file-view{width: 100%;height: 36px;position: relative;}
+     .upload-file-view .del:before{cursor: pointer;}
+     .login-form input.upload-file-name{ width: 100%;box-sizing: border-box;}
+     .input-file {width: 80px;height: 80px;opacity: 0;cursor: pointer;position: absolute;}
+     .input-file-btn {width: 90px;height: 34px;cursor: pointer;position: absolute;	background-color: #ffe6dc;border-radius: 2px;border: solid 1px #FF5B00;text-align: center;line-height: 36px;font-size: 14px;color: #FF5B00;top: 0;right: 0;}
+     .input-file-btn input{width: 90px;height: 36px;opacity: 0;cursor: pointer;position: absolute;top: 0;left: 0;z-index: 999;}
+     .upload-img {width: 100%;height: 100%;display: block;border-radius: 2px;}
+     .add-text {font-size: 12px;color: #333330;opacity: 0.5;position: absolute;top: 60%;right: 13px}
+     .release-main-container {width: 100%;height: auto;float: left;}
+     #uploadGoodsImages {width: 496px;}
+     .icon.add:before {width: 25px;height: 25px;background-position: -168px -374px;position: absolute;top: 17px;right: 24px;}
+     .icon.del:before {width: 20px;height: 20px;background-position: -116px -138px;position: absolute;top: -3px;right: -3px;}
+     .form-upload-tips .icon-wen:before {width: 20px;height: 20px;background-position: -84px -144px;cursor: pointer;}
+     .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -15px;left: 35px;}
+     .form-upload-tips {width: 20px;height: 90px;float: left;position: relative;margin-top: 10px;}
+     .wen-tips {width: 462px;height: 46px;line-height: 46px;text-align: center;color: #FFF;font-size: 14px;background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17);position: absolute;bottom: 10px;left: -32px;border-radius: 3px;display: none;}
+     .form-upload-tips:hover .wen-tips {display: block;}
+     #word-limit {position: absolute;right: 0;bottom: 10px;font-size: 12px;color: #9aa5b5}
+     .unlogin-item {margin-bottom: 20px;width: 100%;float: left;}
+     .unlogin-item.none {margin-bottom: 0;}
+     .getCode{box-sizing: border-box;width: 168px;height: 36px;margin-right: 15px;float: right; line-height: 34px;text-align: center;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #FF5B00;color: #FF5B00;font-size: 14px;}
+     .getCode.disabled{background-color: #D6D6D6;border-color: #D6D6D6;color: #FFFFFF;}
+     .textarea-wrapper {letter-spacing: 1.5px;line-height: 24px;color: #627386;position: relative;width: 496px;}
+     .release-button {width: 100%;height: auto;float: left;margin: 50px 0;}
+     .release-button .text{width: 100%;text-align: center;margin: 15px 10px;}
+     .release-button .buttton-main{width:300px;margin: 0 auto;}
+     .release-button button {width: 300px;height: 50px;border-radius: 2px;line-height: 50px;text-align: center;font-size: 18px;cursor: pointer;}
+     .Read {border: solid 1px #FF5B00;background-color: #ffe6dc;color: #FF5B00;float: left;position: relative;}
+     #btn-submit {background-color: #FF5B00;color: #fff;float: right;border-radius: 25px}
+     input[type=checkbox] {margin-right: 10px;}
+     select {appearance: none;-moz-appearance: none;-webkit-appearance: none;}
+     .icon.brand:before {width: 25px;height: 25px;background-position: -87px 11px;position: absolute;right: 15px}
+     .icon.selected:before {width: 25px;height: 25px;background-position: -87px 11px;position: absolute;right: 15px}
+     .icon.province:before {left: 125px;}
+     .icon.cCity:before {right: 195px;}
+
+     /**/
+     .select {position: relative;display: block;width: 508px;color: #22272e;vertical-align: middle;text-align: left;height: 36px;user-select: none}
+     .select .placeholder {position: relative;display: block;padding-left: 10px;border-radius: 2px;cursor: pointer;border: solid 1px #b8bfca;height: 36px;line-height: 36px}
+     .select.is-open .placeholder:after {content: '\f077';}
+     .select.is-open ul {display: block;}
+     .select.select--white .placeholder {background: #fff;color: #999;}
+     .select.select--white .placeholder:hover {background: #fafafa;}
+     .select ul {position: absolute;overflow: hidden;width: 100%;background: #fff;border-radius: 2px;top: 100%;left: 0;list-style: none;margin: 2px 0 0 0;padding: 0;z-index: 100;border: solid 1px #b8bfca;max-height: 350px;overflow: auto;}
+     .select ul li {display: block;text-align: left;padding: 0.8em 1em 0.8em 1em;color: #999;cursor: pointer;}
+     .select ul li:hover {background-color: #ffe6dc;color: #FF5B00}
+     .release-tips {display: block;height: 20px;line-height: 20px;white-space: nowrap;color: red;font-size: 12px}
+     .icon.errTips:before {width: 20px;height: 20px;background-position: -172px -296px;vertical-align: top;}
+     .thebj {position: fixed;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);z-index: 999999;opacity: 0;}
+     .thebj.show {opacity: 1;}
+     .theresult {position: fixed;left: 50%;top: 50%;margin-top: -150px;margin-left: -243px;width: 400px;background-color: #fff;border-radius: 2px;height: auto;padding-bottom: 20px;}
+     .theresult p:nth-child(1) {color: #627386;}
+     .theresult p {font-size: 14px;color: #22272e;line-height: 25px;padding: 15px 15px 0;}
+     .paybtn {font-size: 0;width: 100%;box-sizing: border-box;padding: 0 20px;}
+     .paybtn span {display: inline-block;text-align: center;margin: 15px 0 0 10px;font-size: 14px;cursor: pointer;float: right;}
+     .paybtn .cancel {border-right: 1px solid #F2F2F2;height: 32px;background: rgba(225, 86, 22, 1);color: #fff;line-height: 32px;border-radius: 2px;padding: 0 10px;}
+     .paybtn .thegopay {border: 1px solid #E0E0E0;height: 32px;line-height: 32px;border-radius: 2px;color: #333333;padding: 0 10px;}
+     .gosecond {color: #1683E1;border-right: 1px solid #F2F2F2;}
+     .close {position: absolute;right: 0;top: 0;width: 40px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;font-size: 24px;}
+     .bjmain .title{width: -webkit-fill-available;color: #627386;padding: 15px;display: inline-block;border: solid 1px #e2e7ef;font-size: 14px}
+     .unlogin-label{height: 26px;color:#627386}
+     .release-label{color: #627386}
+ }
+
+/*移动端*
+
+ */
+ @media screen and (max-width:768px){
+    #secondHandrelease {padding: 2.7vw;}
+    footer{display: none;}
+    .bannerimg  img{width: 100%;height: 100% ;}
+     .mt-top {line-height: 11vw;color: #22272e;text-align: left;font-size: 5vw;font-weight: bold;height: 11vw}
+     .newsTitle {line-height: 6vw;text-align: left;color: #FF5B00;padding: 2.7vw;background-color: rgba(225, 86, 22, .1)}
+     .mt-bottom {margin: 5.3vw auto;}
+     #mt-form {position: relative;overflow: hidden;width: 93.4vw;margin: auto}
+     .unlogin-label {width: 100%;margin-bottom: 2.7vw;color: #627386;}
+     .secondradio div {width: 27vw;height: 10.7vw;line-height: 10.7vw;background-color: #ffffff;border: solid .27vw #b8bfca;text-align: center;display: inline-block;cursor: pointer;position: relative;color: #627386}
+     .secondradio div:nth-child(2) {margin: 0 5.3vw;}
+     .secondradio div.active {color: #FF5B00;border: solid .27vw #FF5B00;}
+     .secondradio div.buy {width: 39.2vw;}
+     .mIcon.select:before {background-position: -75.5vw -8.8vw;width: 5.3vw;height: 4.8vw;position: absolute;bottom: 0;right: 0;transition: none;}
+     .mIcon.buy:before {left: 34vw;}
+     .secondradio {margin-bottom:4vw;}
+     .secondradio div.typelist{width: 27vw;height: 36px;line-height: 16px;box-sizing: border-box;padding: 1.5vw 0; background-color: #ffffff;border: none;display: inline-block;cursor: pointer;position: relative;color: #627386;}
+     .secondradio .typelist .radio{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: left;}
+     .secondradio .typelist.checked .radio{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+     .secondradio .typelist .rtext{display: block;float: left;margin-left: 8px;}
+     .linqi_text {width: 100%;height:9.6vw;background-color: #1890f9;box-shadow: 0px .8vw 1.3vw 0px rgba(24, 144, 249, 0.17);text-align: center;line-height: 9.6vw;color: #ffffff;margin: auto;font-size: 3.2vw;}
+     .jiaobiao {width: 0;height: 0;border-left: 2.7vw solid transparent;border-right: 2.7vw solid transparent;top: 20.8vw;right: 50%;border-bottom: 2.7vw solid #1890f9;position: absolute}
+     #shoplogoTwo {height:9.6vw;margin-top: 2.7vw;}
+     .login-form input[type="text"] {width: 100%;height: 9.6vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;padding-left: 2.7vw;color: #22272e;box-sizing: border-box}
+     input[type="text"]::placeholder, textarea::placeholder {color: #9aa5b5;;}
+     .login-form input.code{width: 60vw;}
+     .getCode{box-sizing: border-box;width: 30vw;height: 9.6vw;float: right; line-height: 9.6vw;text-align: center;background-color: #ffe6dc;border-radius:.53vw;border: solid 1px #FF5B00;color: #FF5B00;font-size: 3.2vw;}
+     .getCode.disabled{background-color: #D6D6D6;border-color: #D6D6D6;color: #FFFFFF;}
+     .shrink-spacing {margin: 5.3vw 0;position: relative;}
+     .red-color {color: #f94b4b;}
+     .address-input {width: 28.5vw;height: 10.7vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;padding-left: 6.7vw;color: #9aa5b5}
+     .address-item i{position: relative;}
+     .address-input.city {margin: 0 2.6vw;}
+     .border-grey {width: 100%;height: 40vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;margin-top: 5.3vw;resize: none;padding: 2.7vw;box-sizing: border-box}
+     .border-grey.address-details{height: 25vw;}
+     #description {margin-top: 0;}
+     .upload-file {position: relative;float: left;margin: 2.7vw 2.7vw 2.7vw 0px;cursor: pointer;width: 21.3vw;height: 21.3vw;border-radius: .53vw;border: solid .27vw #b8bfca}
+     .login-form input.upload-file-name{ width: 100% !important; padding: 0 2.7vw;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
+     .input-file {width: 21.3vw;height: 21.3vw;opacity: 0;cursor: pointer;position: absolute;}
+     .input-file-btn {width: 33.6vw;height: 9vw;box-sizing: border-box; cursor: pointer;position: absolute;	background-color: #ffe6dc;border-radius: 2px;border: solid 1px #FF5B00;text-align: center;line-height: 9vw;font-size: 14px;color: #FF5B00;right: 0;top: 7.5vw;}
+     .input-file-btn input{width: 33.6vw;height: 9.6vw;opacity: 0;cursor: pointer;position: absolute;top: 0;left: 0;z-index: 999;}
+     .upload-img {width: 100%;height: 100%;display: block;border-radius: .53vw;}
+     .add-text {font-size: 3.2vw;color: #333330;opacity: 0.5;position: absolute;top: 60%;right:3.3vw}
+     .release-main-container {overflow: hidden;}
+     #uploadGoodsImages {width: 100%;overflow: auto;}
+     .mIcon.add:before {width: 6.7vw;height: 6.7vw;background-position: -8.8vw -61vw;position: absolute;top: 4.5vw;right: 7.2vw}
+     .mIcon.del:before {width: 5.3vw;height: 5.3vw;background-position: -89.6vw -7.7vw;position: absolute;top: -0.8vw;right: -0.8vw}
+     .mIcon.del.file:before {width: 5.3vw;height: 5.3vw;background-position: -89.6vw -7.7vw;position: absolute;top: 10vw;right: 2vw}
+     .form-upload-tips .icon-wen:before {width: 5.3vw;height: 6.3vw;background-position: -76.5vw 0px;cursor: pointer;}
+     .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 2.1vw;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -4vw;left: 27.2vw;}
+     .form-upload-tips {width: 5.3vw;float: left;margin-top: 2.7vw;}
+     .wen-tips {width: 100%;height: 12.5vw;line-height: 6.4vw;text-align: center;color: #FFF;font-size: 2.7vw;background-color: #1890f9;box-shadow: 0 .8vw 1.6vw 0 rgba(24, 144, 249, 0.17);position: absolute;right: 0;border-radius: .8vw;display: none;}
+     .form-upload-tips:hover .wen-tips {display: block;}
+     #word-limit {position: absolute;right: 2.7vw;bottom: 2.7vw;font-size: 3.2vw;color: #9aa5b5}
+     .textarea-wrapper {letter-spacing: .4vw;line-height: 6.4vw;color: #627386;position: relative;width: 100%;font-size: 3.2vw}
+     .release-button .text{width: 100%;text-align: center;margin: 15px 10px;}
+     .release-button .buttton-main{width:100vw;margin: 0 auto;}
+     .release-button {width: 100%;height: auto;float: left;margin: 8vw 0;}
+     .release-button button {width: 100%;height: 12vw;border-radius: .53vw;line-height: 12vw;text-align: center;font-size: 4.5vw;cursor: pointer;box-sizing: border-box;}
+     .Read {border: solid .27vw #FF5B00;background-color: #ffe6dc;color: #FF5B00;}
+     #btn-submit {background-color: #FF5B00;color: #fff;border-radius: 6vw;}
+     input[type=checkbox] {margin: 1.27vw 7px 0px -3.4vw;width: 3.5vw;height: 3.5vw;line-height: 3.5vw}
+     select {appearance: none;-moz-appearance: none;-webkit-appearance: none;}
+     .mIcon.selected:before {width: 6.7vw;height: 6.7vw;background-position: -49vw 2.4vw;position: absolute;right: -27vw}
+     .mIcon.province:before {right: -26.4vw;}
+     .mIcon.cCity:before {right: -28.8vw;}
+
+     /**/
+     .select {position: relative;display: block;width: 100%;color: #9aa5b5;vertical-align: middle;text-align: left;height: 9.6vw;user-select: none}
+     .select .placeholder {position: relative;display: block;padding-left: 2.7vw;border-radius: .53vw;cursor: pointer;border: solid .27vw #b8bfca;height:9.6vw;line-height: 9.6vw}
+     .select.is-open .placeholder:after {content: '\f077';}
+     .select.is-open ul {display: block;}
+     .select.select--white .placeholder {background: #fff;color: #999;}
+     .select.select--white .placeholder:hover {background: #fafafa;}
+     .select ul {position: absolute;width: 99.5%;background: #fff;border-radius: .53vw;top: 100%;left: 0;list-style: none;border: solid 1px #b8bfca;max-height: 93.3vw;overflow: auto;z-index: 1;}
+     .select ul li {display: block;text-align: left;padding: 0.8em 1em 0.8em 1em;color: #999;cursor: pointer;}
+     .select ul li:hover {background-color: #ffe6dc;color: #FF5B00}
+     .release-tips {display: block;height: 5.3vw;line-height: 5.3vw;white-space: nowrap;color: red;font-size:3.2vw;margin-top: 1.7vw;}
+     .mIcon.errTips:before {width: 5.3vw;height: 5.3vw;background-position: -25.9vw -8.8vw;vertical-align: top;}
+     .thebj {position: fixed;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);z-index: 999999;opacity: 0;}
+     .thebj.show {opacity: 1;}
+     .theresult {position: absolute;right: 14%;top: 30%;width: 63.7vw;background-color: #fff;border-radius: .53vw;padding: 2.7vw;}
+     .theresult span{padding: 1.3vw 0;border-bottom: .27vw solid #e2e7ef;width: 100%;display: block;color: #627386}
+     .theresult p {font-size: 3.7vw;color: #22272e;line-height: 6.7vw;padding: 2vw 2vw}
+     .paybtn {width: 100%;}
+     .paybtn span {display: block;text-align: center;font-size: 3.7vw;cursor: pointer;}
+     .paybtn .cancel {margin: 2.7vw 0;width: 100%;height: 9.9vw;background: rgba(225, 86, 22, 1);color: #fff;line-height: 9.9vw;border-radius: .53vw;box-sizing: border-box;}
+     .paybtn .thegopay {border: .27vw solid #E0E0E0;height: 9.9vw;line-height: 8.5vw;border-radius: .53vw;color: #333333;padding: 0 1.3vw 0 1.3vw;box-sizing: border-box;}
+     .gosecond {color: #1683E1;border-right: .27vw solid #F2F2F2;}
+     .close {position: absolute;right: 0;top: 0;width: 10.7vw;height: 10.7vw;line-height: 10.7vw;text-align: center;cursor: pointer;font-size: 6.4vw;}
+    .brand.mIcon:before{
+    width: 5.3vw;
+    height: 5.3vw;
+    background-position: -51.2vw -.27vw;
+    position: absolute;
+    top: 2vw;
+    right: 2.7vw
+}
+ }

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

@@ -1,102 +1,108 @@
-/**
- * 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 #ffe6dc;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: #ffe6dc;color: #FF5B00;}
-    .activeImg{opacity: 0.5;}
-    .right-btn{width: 215px;float: right}
-    .fabu {float: right;text-align: center;height: 26px;margin-right: 30px;background: #FF5B00;width: 72px;line-height: 26px;margin-top: 7px;border-radius: 2px}
-    .fabu a {color: #fff}
-    .intro{border-bottom: 1px solid #FF5B00;float: left;margin-top: 10px; }
-    .intro a{color: #FF5B00;}
-    .mainTab {background: #fff;width:1184px;height: 40px;float: left;}
-    .Listitem:nth-of-type(4n) {margin-right: 0;}
-    .mainTab li {height: 40px;line-height: 40px;text-align: center;color: #627386;cursor: pointer;width: 128px;float: left;}
-    .mainTab li.addstyle {color: #FF5B00;}
-    .shopList {width: 1184px;margin: 20px auto;float:left;font-size: 0;}
-    .Listitem {width: 284px;display: inline-block;margin: 0 16px 20px 0;}
-    .itemImg {display: block;position: relative;width: 100%;height: 284px;margin-right: 20px;background-color: #fff;cursor: pointer;}
-    .itemImg .bigImg {width: 100%;height: 100%;}
-    .infotag {font-size: 10px;padding: 0 12px;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;display: block;}
-    .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;}
-    .ItemInfo .tag{height: 22px}
-}
-
-/* 移动端*/
-@media screen and (max-width:768px){
-#fleaMarketList{width: 100%;overflow: hidden}
-    .shopList{background: #fff}
-    .Listitem{height:33vw;padding: 2.7vw;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(4) {margin-right: 0;}
-    .mainTab li {height: 9.6vw;line-height: 9.6vw;text-align: center;color: #627386;cursor: pointer;}
-    .active {color: #E15621;}
-    .secondTitle .ClassA .line{width: 10vw;margin:0 auto;height: .48vw;background-color: #FF5B00;display: block}
-    .mainTab li.addstyle{color: #FF5B00;}
-    .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: 3vw;padding: 0 2.7vw;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 .27vw #f94b4b;color: #f94b4b;background-color: #fadbdb}
-    .infotag.brand {border: solid.27vw #f9a24b;color: #f9a24b;background-color: #faefdb;}
-    .infotag.sold {border: solid .27vw #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;}
-    .infotag.other {border: solid .27vw #1890f9;color: #1890f9;background-color: #e3ebf7;}
-    .targetprice {font-size: 3.4vw;color: #f94b4b;cursor: pointer;}
-    .productname{color: #627386;letter-spacing: .27vw;font-size: 3.4vw;margin: 1.2vw 0;display: block;overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap}
-    .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: 3vw;color: #9aa5b5;margin-bottom: 1.2vw;position: relative;margin-right: 5.3vw}
-    .mIcon.liulanliang:before {background-position: -28.8vw -15.5vw;width: 5.3vw;height: 5.3vw;}
-    .mIcon.shijian:before {background-position: -36.8vw -15.8vw;width: 4.9vw;height: 6vw;position: absolute;right: .24vw;top: -1.7vw;}
-    .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: 2vw;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{margin: auto; width: 100%;text-align: center;font-size: 3vw;position: fixed;bottom: 0;    background: #fff;padding: 2.7vw 0; }
-    .fabu a{ display: inline-block;box-sizing: border-box;border-radius:.54vw;width: 45.4vw;height: 9.8vw;line-height: 9.8vw}
-    .fabu .intro{ background: #ffe6dc;color: #FF5B00;margin-right: 2.7vw;}
-    .fabu .form{background: linear-gradient(135deg, #f28f31 0%, #FF5B00 100%);color: #ffffff;}
-    .fabu a .mIcon{width: 4.6vw;height: 4.6vw;display: block;margin: 0 auto;}
-    .fabu a .mIcon:before{width: 4.6vw;height: 4.6vw;display: block;background-position: -93vw -53vw;}
-    .scroll-load{width: 100%;padding: 2vw 0;}
-    .scroll-load .icon-load{width:20vw;margin:  0 auto;}
-    .scroll-load .icon-load img{float: left;display: inline-block;margin-right: 2vw;}
-    .scroll-load .icon-load span{font-size: 2.8vw;color: #999999;}
-}
+/**
+ * PC端
+ */
+  li {list-style: none;zoom: 1;}
+@media screen and (min-width:768px) {
+    .ListImg img {width: 100%;border-radius: 8px;overflow: hidden;}
+    .secondTitle {width: 1184px;height: 40px;background-color: #ffffff;border-bottom: 1px solid #ffe6dc;margin-top: 20px;border-radius: 8px;}
+    .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: #ffe6dc;color: #FF5B00;}
+    .activeImg{opacity: 0.5;}
+    .right-btn{width: 215px;float: right}
+    .second-fixed-title{ width: 100%;height: 120px;z-index: 999; box-sizing: border-box;padding: 25px 0;position: fixed;bottom: 0;left: 0; background-color: rgba(255,255,255,0.9);opacity: 0;}
+    .second-fixed-title.show{ opacity: 1 }
+    .second-fixed-title .inner{ width: 1184px;margin: 0 auto; }
+    .second-fixed-title .second-fixed-btn{ width: 220px;height: 70px;line-height: 70px;font-size: 20px;font-weight: 600; text-align: center;color: #FFFFFF;letter-spacing: 3px;float: right;border-radius: 35px;background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);}
+    .fabu {float: right;text-align: center;height: 26px;margin-right: 30px;background: #FF5B00;width: 72px;line-height: 26px;margin-top: 7px;border-radius:13px}
+    .fabu a {color: #fff}
+    .intro{border-bottom: 1px solid #FF5B00;float: left;margin-top: 10px; }
+    .intro a{color: #FF5B00;}
+    .mainTab {background: #fff;width:1184px;height: 40px;float: left;}
+    .Listitem:nth-of-type(4n) {margin-right: 0;}
+    .mainTab li {height: 40px;line-height: 40px;text-align: center;color: #627386;cursor: pointer;width: 128px;float: left;}
+    .mainTab li.addstyle {color: #FF5B00;}
+    .shopList {width: 1184px;margin: 20px auto;float:left;font-size: 0;}
+    .Listitem {width: 284px;display: inline-block;margin: 0 16px 20px 0;border-radius: 8px;overflow: hidden;}
+    .itemImg {display: block;position: relative;width: 100%;height: 284px;margin-right: 20px;background-color: #fff;cursor: pointer;}
+    .itemImg .bigImg {width: 100%;height: 100%;}
+    .infotag {font-size: 10px;padding: 0 10px;height: 18px;line-height: 18px;text-align: center;display: inline-block;border-radius: 4px;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;display: block;}
+    .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 -329px;width: 20px;height: 23px;position: absolute;right: 3px;top: -4px}
+    .icon.liulanliang:before {background-position: -187px -327px;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;}
+    .ItemInfo .tag{height: 22px}
+}
+
+/* 移动端*/
+@media screen and (max-width:768px){
+#fleaMarketList{width: 100%;overflow: hidden}
+    #fleaMarketList{ padding-top: 27vw; }
+    .shopList{background: #fff}
+    .Listitem{height:33vw;padding: 2.7vw;border-bottom: .24vw solid #F0F2F4}
+    .ListImg{width: 100%;height: 35.3vw}
+    .ListImg img {width: 100%;height: 100%;}
+    .secondTitle {width: 100%;height: 10vw; display: none; background-color: #ffffff;border-bottom: .24vw solid #F0F2F4;position: relative}
+    .second-fixed-title{display: none; }
+    .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(4) {margin-right: 0;}
+    .mainTab li {height: 9.6vw;line-height: 9.6vw;text-align: center;color: #627386;cursor: pointer;}
+    .active {color: #E15621;}
+    .secondTitle .ClassA .line{width: 10vw;margin:0 auto;height: .48vw;background-color: #FF5B00;display: block}
+    .mainTab li.addstyle{color: #FF5B00;}
+    .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: 3vw;padding: 0 2.7vw;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 .27vw #f94b4b;color: #f94b4b;background-color: #fadbdb}
+    .infotag.brand {border: solid.27vw #f9a24b;color: #f9a24b;background-color: #faefdb;}
+    .infotag.sold {border: solid .27vw #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;}
+    .infotag.other {border: solid .27vw #1890f9;color: #1890f9;background-color: #e3ebf7;}
+    .targetprice {font-size: 3.4vw;color: #f94b4b;cursor: pointer;}
+    .productname{color: #627386;letter-spacing: .27vw;font-size: 3.4vw;margin: 1.2vw 0;display: block;overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap}
+    .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: 3vw;color: #9aa5b5;margin-bottom: 1.2vw;position: relative;margin-right: 5.3vw}
+    .mIcon.liulanliang:before {background-position: -28.8vw -15.5vw;width: 5.3vw;height: 5.3vw;}
+    .mIcon.shijian:before {background-position: -36.8vw -15.8vw;width: 4.9vw;height: 6vw;position: absolute;right: .24vw;top: -1.7vw;}
+    .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: 2vw;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{margin: auto; width: 100%;text-align: center;font-size: 3vw;position: fixed;bottom: 0;    background: #fff;padding: 2.7vw 0; }
+    .fabu a{ display: inline-block;box-sizing: border-box;border-radius:.54vw;width: 45.4vw;height: 9.8vw;line-height: 9.8vw;border-radius: 5vw;}
+    .fabu .intro{ background: #ffe6dc;color: #FF5B00;margin-right: 2.7vw;}
+    .fabu .form{background: linear-gradient(135deg, #f28f31 0%, #FF5B00 100%);color: #ffffff;}
+    .fabu a .mIcon{width: 4.6vw;height: 4.6vw;display: block;margin: 0 auto;}
+    .fabu a .mIcon:before{width: 4.6vw;height: 4.6vw;display: block;background-position: -93vw -53vw;}
+    .scroll-load{width: 100%;padding: 2vw 0;}
+    .scroll-load .icon-load{width:20vw;margin:  0 auto;}
+    .scroll-load .icon-load img{float: left;display: inline-block;margin-right: 2vw;}
+    .scroll-load .icon-load span{font-size: 2.8vw;color: #999999;}
+    footer{ display: none;}
+}

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

@@ -1,125 +1,125 @@
-
-@media screen and (min-width:768px) {
-    .recommendBox{margin-bottom:16px;overflow: hidden;}
-    .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
-    #productRecommend{padding:16px;background: #fff}
-    #productRecommend li{float:left;width:167px;height:205px;overflow:hidden;list-style: none;}
-    #productRecommend li .item{width:153px;height:205px;margin:0 auto;line-height:22px}
-    #productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
-    #productRecommend li .item a:hover{color:#FF5B00}
-    #productRecommend li .item img{display:block;width:150px;height:153px;border: solid 1px #e2e7ef}
-    #productRecommend li .item span{max-height:44px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
-    #productRecommend .swiper-wrapper{height:205px;}
-    #productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
-    #productRecommend .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
-    #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#FF5B00;border-radius:2px}
-    #productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
-    .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: 1184px;height: auto;margin: 0 auto;}
-    .preview-header {padding: 12px;background-color: #FFFFFF;margin: 10px 0 20px 0;overflow: hidden}
-    .preview-header .preview-banner {width: 452px;height: 545px;float: left;position: relative;}
-    .preview-header .preview-info {width: 685px;float: right;opacity: 0;}
-    .preview-header .preview-info.active {opacity: 1;}
-    .preview-header .preview-banner-big {width: 452px;height: 452px;float: left;border: 1px solid #e4e4e4;}
-    .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;margin-right: 9px;float: left;background-color: #fff;cursor: pointer;list-style: none;opacity: .5;}
-    .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: #FF5B00;}
-    .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;max-width:none;}
-    .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 {padding: 16px 20px;background-color: #f3f7fe;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;color: #4a4f58;}
-    .preview-bottom .preview-left .preview-tabs-item.active {background-color: #FF5B00;color: #FFF;}
-    .member-detail {color: #999999;font-size: 14px;}
-    .loginWithParam {color: #FC4444;font-size: 14px;cursor: pointer;}
-    .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: 1184px;margin: 20px auto 0;}
-    .title{ height: 40px;line-height: 40px;border-bottom: 1px solid #ffe6dc;font-size: 16px;color: #333333;background-color: #ffffff;}
-    .title .li{display: inline-block;box-sizing: border-box;min-width: 130px;text-align: center;height: 100%;padding: 0 32px;text-align: center;background: #ffe6dc;color: #FF5B00;font-weight: bold;}
-    .mainContent {width: 100%;font-size: 0;}
-    .mainContentLeft {width: 100%;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;margin: auto;}
-    .contentHtml div{margin: 10px auto;}
-    .contentHtml img {display: block;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;}
-    .preview-header .preview-banner-small .item.addImg {border: 1px solid #FF5B00;opacity:1;}
-    .infotag {font-size: 10px;padding: 0 10px;height: 22px;line-height: 22px;text-align: center;display: inline-block;border-radius: 2px;flex: auto;margin: 0 10px}
-    .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;}
-    .fave-text{color: #f94b4b;font-weight: bold;}
-    .fave-text .big{font-size: 20px;}
-
-}
-
-
-/* 移动端*/
-@media screen and (max-width:768px){
-    .inner-container{width: 100%;overflow: hidden;}
-    #swiperImage .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center}
-    #swiperImage .swiper-wrapper img{width:auto;height:100vw;display:block}
-    #imgShown{width: 100%; height: 100vw;position: relative;background: #fff}
-    .preview-info{box-sizing: border-box;padding: 0 3.3vw;overflow: hidden;background: #fff}
-    .preview-info-main{box-sizing: border-box;padding: 2.8vw;font-size: 3.4vw;line-height: 7.5vw;color: #93979F;background: #f3f7fe;border-radius: 2px;position: relative;margin: 3.5vw 0;overflow: hidden}
-    .preview-info .preview-info-main .info {width: 100%;height: 8vw;float: left;margin-bottom: 1.3vw;line-height: 8vw;}
-    .preview-info .preview-info-main .info .label {width: 18.7vw;height: 8vw;float: left;display: block;font-size: 3.4vw;line-height: 8vw;text-align: right;color: #9aa5b5;}
-    .preview-info .preview-info-main .info p {float: left;height: 100%;padding-left: 5.3vw;color: #22272e;}
-    .preview-info-title{font-size: 3.6vw;color: #22272e;padding-top: 4vw;position: relative}
-    .ercode{padding: 2.8vw;}
-    .ercode img{width: 100%;height: 100%;}
-    .main{margin-top: 5vw;padding: 2.8vw;background: #fff}
-    .Disclaimer span{display: block;padding: 1.7vw 0;text-align: center;}
-    .Disclaimer P{line-height: 6.4vw;}
-    .contentHtml div{margin-top: 2.7vw;}
-    .contentHtml img{width: 100%;}
-    .info-p.name{color: #22272e;font-size: 4.2vw;}
-    .infotag {font-size:  3vw;padding:0 2.7vw;height: 4.8vw;line-height:  4.8vw;text-align: center;display: inline-block;border-radius: .48vw;flex: auto;margin: 0 1.72vw}
-    .infotag.news {border: solid .27vw #f94b4b;color: #f94b4b;background-color: #fadbdb}
-    .infotag.brand {border: solid .27vw #f9a24b;color: #f9a24b;background-color: #faefdb;}
-    .infotag.sold {border: solid .27vw #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;}
-    .infotag.other {border: solid .27vw #1890f9;color: #1890f9;background-color: #e3ebf7;}
-    .Disclaimer{background: #fef6f3;border-radius: 2.7vw;padding: 2.7vw;}
-    .main .title{padding: 2.7vw 0;font-size: 4.27vw;color: #22272e}
-    .contentHtml{margin-top: 2.7vw}
-    .fave-text{color: #f94b4b;font-weight: bold;}
-    .fave-text .big{font-size: 3.7vw;}
-    .loginWithParam {color: #FC4444;font-size: 3.2vw;cursor: pointer;}
-    .yishou_img {width: 14%;position: absolute;top: 2vw;right: 0;transform: translate(-9%, 7%);z-index: 1;}
-    .recommendBox{margin-top:2vw;width:100%;background:#FFF}
-.recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
-#productRecommend{width:100%;height:50vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}
-#productRecommend li{width:29.2vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}
-#productRecommend li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:26.8vw;height:41.8vw;font-size:3.4vw}
-#productRecommend li .item img{display:block;width:100%;height:26.8vw}
-#productRecommend li .item span {color: #93979F;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top: 2.6vw;}
-}
+
+@media screen and (min-width:768px) {
+    .recommendBox{margin-bottom:16px;overflow: hidden;}
+    .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
+    #productRecommend{padding:16px;background: #fff}
+    #productRecommend li{float:left;width:167px;height:205px;overflow:hidden;list-style: none;}
+    #productRecommend li .item{width:153px;height:205px;margin:0 auto;line-height:22px}
+    #productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
+    #productRecommend li .item a:hover{color:#FF5B00}
+    #productRecommend li .item img{display:block;width:150px;height:153px;border: solid 1px #e2e7ef}
+    #productRecommend li .item span{max-height:44px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
+    #productRecommend .swiper-wrapper{height:205px;}
+    #productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
+    #productRecommend .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+    #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#FF5B00;border-radius:2px}
+    #productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
+    .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: 1184px;height: auto;margin: 0 auto;}
+    .preview-header {padding: 12px;background-color: #FFFFFF;margin: 10px 0 20px 0;overflow: hidden;border-radius: 16px;}
+    .preview-header .preview-banner {width: 452px;height: 545px;float: left;position: relative;}
+    .preview-header .preview-info {width: 685px;float: right;opacity: 0;}
+    .preview-header .preview-info.active {opacity: 1;}
+    .preview-header .preview-banner-big {width: 452px;height: 452px;float: left;border: 1px solid #e4e4e4;border-radius: 8px;overflow: hidden;}
+    .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;margin-right: 9px;float: left;background-color: #fff;cursor: pointer;list-style: none;opacity: .5;}
+    .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: #FF5B00;}
+    .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-radius: 8px; border: 1px solid #e4e4e4;z-index: 9999;background: #FFFFFF;}
+    .preview-header .preview-box img {width: 1096px;height: 1096px;margin-right: 10px;display: block;max-width:none;}
+    .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 {padding: 16px 20px;background-color: #f3f7fe;border-radius: 12px;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;color: #4a4f58;}
+    .preview-bottom .preview-left .preview-tabs-item.active {background-color: #FF5B00;color: #FFF;}
+    .member-detail {color: #999999;font-size: 14px;}
+    .loginWithParam {color: #FC4444;font-size: 14px;cursor: pointer;}
+    .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: 1184px;margin: 20px auto 0;border-radius: 16px;overflow: hidden;}
+    .title{ height: 40px;line-height: 40px;border-bottom: 1px solid #ffe6dc;font-size: 16px;color: #333333;background-color: #ffffff;}
+    .title .li{display: inline-block;box-sizing: border-box;min-width: 130px;text-align: center;height: 100%;padding: 0 32px;text-align: center;background: #ffe6dc;color: #FF5B00;font-weight: bold;}
+    .mainContent {width: 100%;font-size: 0;}
+    .mainContentLeft {width: 100%;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;margin: auto;}
+    .contentHtml div{margin: 10px auto;}
+    .contentHtml img {display: block;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;}
+    .preview-header .preview-banner-small .item.addImg {border: 1px solid #FF5B00;opacity:1;border-radius: 4px;overflow: hidden;}
+    .infotag {font-size: 10px;padding: 0 10px;height: 22px;line-height: 22px;text-align: center;display: inline-block;border-radius: 2px;flex: auto;margin: 0 10px}
+    .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;}
+    .fave-text{color: #f94b4b;font-weight: bold;}
+    .fave-text .big{font-size: 20px;}
+
+}
+
+
+/* 移动端*/
+@media screen and (max-width:768px){
+    .inner-container{width: 100%;overflow: hidden;}
+    #swiperImage .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center}
+    #swiperImage .swiper-wrapper img{width:auto;height:100vw;display:block}
+    #imgShown{width: 100%; height: 100vw;position: relative;background: #fff}
+    .preview-info{box-sizing: border-box;padding: 0 3.3vw;overflow: hidden;background: #fff}
+    .preview-info-main{box-sizing: border-box;padding: 2.8vw;font-size: 3.4vw;line-height: 7.5vw;color: #93979F;background: #f3f7fe;border-radius: 2px;position: relative;margin: 3.5vw 0;overflow: hidden}
+    .preview-info .preview-info-main .info {width: 100%;height: 8vw;float: left;margin-bottom: 1.3vw;line-height: 8vw;}
+    .preview-info .preview-info-main .info .label {width: 18.7vw;height: 8vw;float: left;display: block;font-size: 3.4vw;line-height: 8vw;text-align: right;color: #9aa5b5;}
+    .preview-info .preview-info-main .info p {float: left;height: 100%;padding-left: 5.3vw;color: #22272e;}
+    .preview-info-title{font-size: 3.6vw;color: #22272e;padding-top: 4vw;position: relative}
+    .ercode{padding: 2.8vw;}
+    .ercode img{width: 100%;height: 100%;}
+    .main{margin-top: 5vw;padding: 2.8vw;background: #fff}
+    .Disclaimer span{display: block;padding: 1.7vw 0;text-align: center;}
+    .Disclaimer P{line-height: 6.4vw;}
+    .contentHtml div{margin-top: 2.7vw;}
+    .contentHtml img{width: 100%;}
+    .info-p.name{color: #22272e;font-size: 4.2vw;}
+    .infotag {font-size:  3vw;padding:0 2.7vw;height: 4.8vw;line-height:  4.8vw;text-align: center;display: inline-block;border-radius: .48vw;flex: auto;margin: 0 1.72vw}
+    .infotag.news {border: solid .27vw #f94b4b;color: #f94b4b;background-color: #fadbdb}
+    .infotag.brand {border: solid .27vw #f9a24b;color: #f9a24b;background-color: #faefdb;}
+    .infotag.sold {border: solid .27vw #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;}
+    .infotag.other {border: solid .27vw #1890f9;color: #1890f9;background-color: #e3ebf7;}
+    .Disclaimer{background: #fef6f3;border-radius: 2.7vw;padding: 2.7vw;}
+    .main .title{padding: 2.7vw 0;font-size: 4.27vw;color: #22272e}
+    .contentHtml{margin-top: 2.7vw}
+    .fave-text{color: #f94b4b;font-weight: bold;}
+    .fave-text .big{font-size: 3.7vw;}
+    .loginWithParam {color: #FC4444;font-size: 3.2vw;cursor: pointer;}
+    .yishou_img {width: 14%;position: absolute;top: 2vw;right: 0;transform: translate(-9%, 7%);z-index: 1;}
+    .recommendBox{margin-top:2vw;width:100%;background:#FFF}
+.recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
+#productRecommend{width:100%;height:50vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}
+#productRecommend li{width:29.2vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}
+#productRecommend li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:26.8vw;height:41.8vw;font-size:3.4vw}
+#productRecommend li .item img{display:block;width:100%;height:26.8vw}
+#productRecommend li .item span {color: #93979F;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top: 2.6vw;}
+}

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

@@ -35,12 +35,12 @@ var fleaMarketList = new Vue({
           hasNextPage:false
      },
      computed: {
-          pageTotal: function () {
+          pageTotal () {
                   var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
 
                   return total > 0 ? total : 1;
             },
-           showPageBtn: function () {
+           showPageBtn () {
                 var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
                     total = total > 0 ? total : 1;
                 var index = this.listQuery.pageNum, arr = [];
@@ -56,7 +56,7 @@ var fleaMarketList = new Vue({
             },
       },
      methods:{
-       toPagination: function (pageNum) {
+       toPagination (pageNum) {
           var _this = this;
            _this.productsList = [];
             if (pageNum <= this.pageTotal) {
@@ -64,18 +64,18 @@ var fleaMarketList = new Vue({
                 _this.gettabList()
             }
         },
-        checkNum: function () {
+        checkNum () {
             if (this.pageInput > this.pageTotal) {
                 this.pageInput = this.pageTotal;
             } else if (this.pageInput < 1) {
                 this.pageInput = 1;
             }
         },
-         handle: function (index) {//一級分类
+         handle (index) {//一級分类
                var _this = this;
                _this.currentId = index;
                _this.tabTitleName = '二手仪器';
-               if ( _this.currentId == '1'){
+               if ( _this.currentId === '1'){
                     _this.mainflag = true;
                }else {
                     _this.mainflag=false;
@@ -84,26 +84,26 @@ var fleaMarketList = new Vue({
                _this.listQuery.pageNum = 1;
                _this.gettabList();
           },
-         handleChild:function(item){ //二级分类
+         handleChild(item){ //二级分类
                var _this = this;
                _this.currentID2 = item.value;
                if(!isPC){
                    _this.tabTitleName = item.name;
-                   if (_this.currentID2==item.value){
+                   if (_this.currentID2===item.value){
                        _this.mainflag=false;
                    }
                }
                _this.listQuery.pageNum = 1;
                _this.gettabList();
           },
-           gettabList:function (more) {
+         gettabList (more) {
                 var _this = this;
                 _this.returnedTarget();
                 var params = Object.assign({userId:_this.userId,secondHandType: _this.currentId,instrumentType:_this.currentID2}, _this.listQuery);
                 SecondApi.SeconHandProductList(params,function (res) {
-                     if (res.code == 0) {
+                     if (res.code === 0) {
                            var data = res.data;
-                           if(data.results.length == 0){
+                           if(data.results.length === 0){
                                _this.tabchildList = [];
                                _this.showflag = true;
                                _this.listRecord = data.totalRecord;
@@ -132,7 +132,14 @@ var fleaMarketList = new Vue({
                          }
                 })
           },
-           returnedTarget:function(){//对象合并 IE 兼容方法
+         handleForm(){
+           if(this.userId > 0){
+               window.open('/flea-market/form.html')
+           }else{
+               window.location.href = '/login.html';
+           }
+         },
+       returnedTarget(){//对象合并 IE 兼容方法
             if (typeof Object.assign != 'function') {
                 Object.assign = function(target) {
                     'use strict';
@@ -162,6 +169,14 @@ var fleaMarketList = new Vue({
             _this.userId = userInfo.userId;
         }
          _this.gettabList();
+         // 底部导航栏悬浮
+         $(window).on('scroll', function(){
+             if($(window).scrollTop() > 100){
+                 $(".second-fixed-title").addClass("show");
+             } else{
+                 $(".second-fixed-title").removeClass('show');
+             }
+         })
          setTimeout(function(){  // 图片懒加载
              $("img[data-original]").lazyload();
          },500);

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

@@ -1,191 +1,191 @@
-<!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>
-     <link th:href="@{/css/flea-market/secondDetail.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 二手商品详情 -->
-<div class="preview-container" id="fleaMarket" >
-    <input type="hidden" th:value="${productId}" id="productId">
-    <div class="inner-container">
-        <div class="preview-header clearfix">
-            <div class="preview-banner clearfix" id="imgShown" >
-                <div class="preview-banner-big bigImage" v-if="isPC">
-                    <img class="preview-img" src="/img/base/placeholder.png" :data-original="previewBigimage" >
-                    <span class="mask"></span>
-                </div>
-                <div class="preview-banner-small" id="CM____pic_thumb" v-if="isPC">
-                    <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="/img/base/placeholder.png" :data-original ="item">
-                        </li>
-                    </ul>
-                </div>
-                    <div id="swiperImage" class="CM____pic_thumb swiper-container" v-if="(!isPC)">
-                        <ul class="swiper-wrapper clear preview-thumb-ul">
-                            <li class="swiper-slide mfc"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 class="swiper-pagination mfc"></div>
-                  </div>
-                <div class="preview-box" id="mag" v-if="isPC">
-                    <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" v-if="isPC" style="padding: 15px" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="Showlogo"><img src="/img/flea-market/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="/img/flea-market/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%" v-if="detail.sold == 0">
-                        <span class="label">交&nbsp;&nbsp;易&nbsp;&nbsp;价：</span>
-                        <p>
-                            <span v-if="detail.detailTalkFlag==2&&userID == 0" class="fave-text">
-                                <span v-if="detail.sold == 1"></span>
-                                <span v-else>价格详聊</span>
-                            </span>
-                            <span v-else-if="userID == 0">
-                                <a class="member-detail toLogin loginWithParam " onclick="_czc.push(['_trackEvent','二手商品详情','登录查看价格','点击','','Um_Event_SecondDetailsLoginButton'])">
-                                    <span v-if="detail.sold == 1"></span>
-                                    <span v-else>登录查看价格></span>
-                                </a>
-                            </span>
-                            <span v-else-if="userID > 0 && detail.detailTalkFlag==2" class="fave-text">
-                                <span v-if="detail.sold == 1"></span>
-                                <span v-else>价格详聊</span>
-                            </span>
-                            <span v-else class="fave-text">￥<span class="big">{{detail.price}}</span></span>
-                        </p>
-                        <div class="tag">
-                           <span class="infotag news" v-if="detail.sold==0&&detail.newAdded==1">最新</span>
-                           <span class="infotag sold" v-if="detail.sold==1">已售</span>
-                           <span class="infotag other" v-if="detail.brandID==161&&detail.brandName!=''&&detail.brandName!=null">{{detail.brandName}}</span>
-                         </div>
-                    </div>
-                     <div class="info " v-if="HandType && userID > 0">
-                        <span class="label">市&nbsp;&nbsp;场&nbsp;&nbsp;价：</span>
-                        <p>{{detail.normalPriceStr}}</p>
-                    </div>
-                    <div class="info " v-if="HandType && userID > 0">
-                       <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 ? detail.maturityYears : '暂无' }}</p>
-                    </div>
-                    <div class="info bind">
-                       <span class="label">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</span>
-                        <p>{{ detail.typeStr ? 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 ? detail.contactName : '暂无' }}</p>
-                    </div>
-                    <div class="info unit" v-if="detail.fixedYears!='' && detail.fixedYears!=null">
-                        <span class="label">出厂日期：</span>
-                        <p>{{detail.fixedYears == 'null' ? '暂无' : detail.fixedYears }}</p>
-                    </div>
-                    <div class="info unit" v-if="detail.showContactFlag==2">
-                        <span class="label">联系方式：</span>
-                        <p>{{ detail.contactMobile ? 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 class="info price" v-if="detail.publishIdentity">
-                        <span class="label">提&nbsp;&nbsp;供&nbsp;&nbsp;方：</span>
-                        <p>{{ detail.publishIdentity == 1 ? '采美二手代售' : detail.companyName }}</p>
-                    </div>
-                </div>
-                <div class="ercode" v-if="ShowImage && detail.sold == 0" ><img :class="ShowImage?'show':''" src="/img/flea-market/er.png"/></div>
-            </div>
-        </div>
-            <!--  相关推荐 -->
-    <div class="recommendBox" v-if="recommde">
-            <div class="hd">相关推荐</div>
-            <div id="productRecommend" class="swiper-container">
-                <ul class="swiper-wrapper" v-cloak>
-                    <li class="swiper-slide mfc" v-for="p in recommdeImage">
-                        <div class="item">
-                            <a class="image" :href="'/product-'+p.productID+'.html'" target="_blank">
-                                <img :src="p.mainImage" :alt="p.name">
-                                <span v-html="p.name"></span>
-                            </a>
-                        </div>
-                    </li>
-                    <li class="swiper-slide  defaulImg" v-for="(item,index) in recommdeindex">
-                       <div class="item">
-                            <a href="javascript:0" class="image">
-                                <img src="/img/base/placeholder.png" alt="">
-                            </a>
-                       </div>
-                    </li>
-                </ul>
-                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
-            </div>
-        </div>
-     <div class="main">
-        <div class="title">
-            <div class="li">商品详情</div>
-        </div>
-        <div class="mainContent">
-            <div class="mainContentLeft">
-                <div class="Disclaimer ">
-                    <span >免责声明</span>
-                    <p>
-                        鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
-                    </p>
-                </div>
-                <div class="contentHtml">
-                    {{detail.productDetails}}
-                       <div 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" src="/lib/magnifier.js"></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/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/secondDetail.js(v=${version})}"></script>
-</body>
-</html>
+<!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>
+     <link th:href="@{/css/flea-market/secondDetail.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 二手商品详情 -->
+<div class="preview-container" id="fleaMarket" >
+    <input type="hidden" th:value="${productId}" id="productId">
+    <div class="inner-container">
+        <div class="preview-header clearfix">
+            <div class="preview-banner clearfix" id="imgShown" >
+                <div class="preview-banner-big bigImage" v-if="isPC">
+                    <img class="preview-img" src="/img/base/placeholder.png" :data-original="previewBigimage" >
+                    <span class="mask"></span>
+                </div>
+                <div class="preview-banner-small" id="CM____pic_thumb" v-if="isPC">
+                    <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="/img/base/placeholder.png" :data-original ="item">
+                        </li>
+                    </ul>
+                </div>
+                    <div id="swiperImage" class="CM____pic_thumb swiper-container" v-if="(!isPC)">
+                        <ul class="swiper-wrapper clear preview-thumb-ul">
+                            <li class="swiper-slide mfc"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 class="swiper-pagination mfc"></div>
+                  </div>
+                <div class="preview-box" id="mag" v-if="isPC">
+                    <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" v-if="isPC" style="padding: 15px" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="Showlogo"><img src="/img/flea-market/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="/img/flea-market/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%" v-if="detail.sold == 0">
+                        <span class="label">交&nbsp;&nbsp;易&nbsp;&nbsp;价：</span>
+                        <p>
+                            <span v-if="detail.detailTalkFlag==2&&userID == 0" class="fave-text">
+                                <span v-if="detail.sold == 1"></span>
+                                <span v-else>价格详聊</span>
+                            </span>
+                            <span v-else-if="userID == 0">
+                                <a class="member-detail toLogin loginWithParam " onclick="_czc.push(['_trackEvent','二手商品详情','登录查看价格','点击','','Um_Event_SecondDetailsLoginButton'])">
+                                    <span v-if="detail.sold == 1"></span>
+                                    <span v-else>登录查看价格></span>
+                                </a>
+                            </span>
+                            <span v-else-if="userID > 0 && detail.detailTalkFlag==2" class="fave-text">
+                                <span v-if="detail.sold == 1"></span>
+                                <span v-else>价格详聊</span>
+                            </span>
+                            <span v-else class="fave-text">￥<span class="big">{{detail.price}}</span></span>
+                        </p>
+                        <div class="tag">
+                           <span class="infotag news" v-if="detail.sold==0&&detail.newAdded==1">最新</span>
+                           <span class="infotag sold" v-if="detail.sold==1">已售</span>
+                           <span class="infotag other" v-if="detail.brandID==161&&detail.brandName!=''&&detail.brandName!=null">{{detail.brandName}}</span>
+                         </div>
+                    </div>
+                     <div class="info " v-if="HandType && userID > 0">
+                        <span class="label">市&nbsp;&nbsp;场&nbsp;&nbsp;价：</span>
+                        <p>{{detail.normalPriceStr}}</p>
+                    </div>
+                    <div class="info " v-if="HandType && userID > 0">
+                       <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 ? detail.maturityYears : '暂无' }}</p>
+                    </div>
+                    <div class="info bind">
+                       <span class="label">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</span>
+                        <p>{{ detail.typeStr ? 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 ? detail.contactName : '暂无' }}</p>
+                    </div>
+                    <div class="info unit" v-if="detail.fixedYears!='' && detail.fixedYears!=null">
+                        <span class="label">出厂日期：</span>
+                        <p>{{detail.fixedYears == 'null' ? '暂无' : detail.fixedYears }}</p>
+                    </div>
+                    <div class="info unit" v-if="detail.showContactFlag==2">
+                        <span class="label">联系方式：</span>
+                        <p>{{ detail.contactMobile ? 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 class="info price" v-if="detail.publishIdentity">
+                        <span class="label">提&nbsp;&nbsp;供&nbsp;&nbsp;方：</span>
+                        <p>{{ detail.publishIdentity == 1 ? '采美二手代售' : detail.companyName }}</p>
+                    </div>
+                </div>
+<!--                <div class="ercode" v-if="ShowImage && detail.sold == 0" ><img :class="ShowImage?'show':''" src="/img/flea-market/er.png"/></div>-->
+            </div>
+        </div>
+            <!--  相关推荐 -->
+    <div class="recommendBox" v-if="recommde">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide mfc" v-for="p in recommdeImage">
+                        <div class="item">
+                            <a class="image" :href="'/product-'+p.productID+'.html'" target="_blank">
+                                <img :src="p.mainImage" :alt="p.name">
+                                <span v-html="p.name"></span>
+                            </a>
+                        </div>
+                    </li>
+                    <li class="swiper-slide  defaulImg" v-for="(item,index) in recommdeindex">
+                       <div class="item">
+                            <a href="javascript:0" class="image">
+                                <img src="/img/base/placeholder.png" alt="">
+                            </a>
+                       </div>
+                    </li>
+                </ul>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+            </div>
+        </div>
+     <div class="main">
+        <div class="title">
+            <div class="li">商品详情</div>
+        </div>
+        <div class="mainContent">
+            <div class="mainContentLeft">
+                <div class="Disclaimer ">
+                    <span >免责声明</span>
+                    <p>
+                        鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
+                    </p>
+                </div>
+                <div class="contentHtml">
+                    {{detail.productDetails}}
+                       <div 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" src="/lib/magnifier.js"></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/mixins/cmSysMixins.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/flea-market/form.html

@@ -1,227 +1,227 @@
-<!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>
-    <link th:href="@{/css/flea-market/form.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 二手商品发布 -->
-<div id="fleaMarketForm" v-cloak="">
-    <div class="bannerimg"><img src="/img/flea-market/banner@2x.png" v-if="isPC"><img
-            src="/img/flea-market/banner3.png " v-else></div>
-    <div class="my-maintenance" id="secondHandrelease">
-        <div class="mt-top"><span class="mt-title">发布二手估价商品</span></div>
-        <div class="newsTitle">
-            <p>
-                欢迎您来到采美365网二手商品市场，您可以在这里发布二手仪器和产品，采美官方 人员将会对商品进行审核和专业的估价，估价完成后才能上架展示并销售，展示期为 3个月。为了完整展示您的商品，请您认真填写以下商品基本信息，谢谢合作。
-            </p>
-        </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="secondradio">
-                    <div v-for="(item,index) in publisherActions"
-                         @click="hadldPublishIdentity(item)"
-                         :class="handleCurrent==item.value?'select active':''" class="icon mIcon ">
-                        {{item.name}}
-                    </div>
-                    <span class="release-tips  errTips icon mIcon"
-                          v-show="vShow_PublishIdentity">{{fromMessage}}</span>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_contactName">
-                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>联系人：
-                    </div>
-                    <input type="text" maxlength="15" v-model="secondParams.contactName" id="linkman"
-                           placeholder="请输入联系人姓名">
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_contactName">{{fromMessage}}</span>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_contactMobile">
-                    <div class="unlogin-label spacing"><span class="red-color">*</span>联系方式：</div>
-                    <input type="text" v-model="secondParams.contactMobile"
-                           oninput="value=value.replace(/[^\d]/g,'')"
-                           @blur="handleMobileInput"
-                           id="phoneNum" maxlength="11" placeholder="请输入联系人手机号">
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_contactMobile">{{fromMessage}}</span>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_checkCode">
-                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>验证码：</div>
-                    <input class="code" type="text"  maxlength="6" v-model="secondParams.checkCode"   @blur="handleMobileCodeInput" placeholder="请输入验证码">
-                    <a class="getCode" href="javascript:void(0);" @click="getNewMobileCodeFn" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_checkCode">{{fromMessage}}</span>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing none" id="vShow_currentId">
-                    <div class="unlogin-label spacing"><span class="red-color">*</span>分类：</div>
-                </div>
-                <div class="secondradio" id="vShowsecondHandType">
-                    <div v-for="(item,index) in fenlei"
-                         @click="secondHandRidio(item)"
-                         :class="currentId==item.value?'select active':''" class="icon mIcon ">
-                        {{item.name}}
-                    </div>
-                    <span class="release-tips  errTips icon mIcon" v-show="vShow_secondHandType">{{fromMessage}}</span>
-                </div>
-                <div class="secondradio" v-if="isShow">
-                    <div v-for="(item ,index) in radioList" :key="index" :class="item.isChecked ? 'select active':''"
-                         @click="secondHandType(item)" class="icon mIcon ">
-                        {{item.name}}
-                    </div>
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_instrumentType">{{fromMessage}}</span>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_BrandID">
-                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品品牌：
-                    </div>
-
-                    <div class="select" @click="showBrand">
-                        <span class="placeholder"><i class="icon brand mIcon"></i>{{ brandname }}</span>
-                        <ul v-show="selectBrand">
-                            <li v-for="(item,index) in BrandList" :key="index" :value='item.id'
-                                @click="ChangeBrand(item)">{{item.name}}
-                            </li>
-                        </ul>
-                    </div>
-                    <input type="text" v-show="shoplogoTwo" v-model="secondParams.brandName" maxlength="20"
-                           id="shoplogoTwo" placeholder="请输入商品品牌">
-                    <div class="release-tips errTips icon mIcon" v-show="vShow_BrandID">{{fromMessage}}</div>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_Name">
-                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品名称：
-                    </div>
-                    <input type="text" maxlength="40" id="shopname" v-model="secondParams.name"
-                           placeholder="请输入商品名称，不超过40个汉字">
-                    <div class="release-tips errTips icon mIcon" v-show="vShow_Name">{{fromMessage}}</div>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_FixedYears">
-                    <div class="unlogin-label spacing" style="letter-spacing: 1px;">出厂日期：</div>
-                    <input type="text" v-model="secondParams.fixedYears" id="shopyear" maxlength="10"
-                           placeholder="请输入出厂日期 如：2020年06月">
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" v-if="secondParams.publishIdentity == 2">
-                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>公司名称：</div>
-                    <input type="text" v-model="secondParams.companyName" id="mechanismname" maxlength="30"
-                           placeholder="请输入公司名称，不超过30个汉字">
-                    <div class="release-tips errTips icon mIcon" v-show="vShow_companyName">{{fromMessage}}</div>
-                </div>
-                <div class="unlogin-item input-item shrink-spacing" id="vShow_shopColor">
-                    <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"
-                           placeholder="请输入商品成色，如“9成新”">
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_shopColor">{{fromMessage}}</span>
-                </div>
-<!--                <div class="unlogin-item input-item shrink-spacing">-->
-<!--                    <div class="unlogin-label spacing">商品类型：</div>-->
-<!--                    <div class="secondradio">-->
-<!--                        <div class="buy icon mIcon" v-for="(item ,index) in beauty" :key='index' value="item.value"-->
-<!--                             @click="getProductType(item.value)" :class="secondType==item.value?'select active':''">-->
-<!--                            {{item.name}}-->
-<!--                        </div>-->
-<!--                    </div>-->
-<!--                </div>-->
-                <div class="unlogin-item input-item address-item shrink-spacing" id="vShow_Address">
-                    <div class="unlogin-label spacing"><span class="red-color">*</span>联系地址：</div>
-                    <i class="province icon mIcon selected"></i>
-                    <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.id'>{{item.name}}
-                        </option>
-                    </select>
-                    <i class="cCity icon mIcon selected"></i>
-                    <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.id">{{item.name}}</option>
-                    </select>
-                    <i class="cTown icon mIcon selected"></i>
-                    <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.id">{{item.name}}</option>
-                    </select>
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_TownId">{{fromMessage}}</span>
-                    <textarea type="text" id="addressDetails" class="border-grey address-details"
-                              v-model="secondParams.address" maxlength="50"
-                              @blur="handleMobileAddresInput"
-                              placeholder="请填写详细地址，如街道/小区/门牌等"/></textarea>
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_Address">{{fromMessage}}</span>
-                </div>
-                <div class="release-main-container">
-                    <div class="release-from">
-                        <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">
-                                <img :data-original='item'
-                                     :src="item"
-                                     :data-image="item"
-                                     alt="商品图片"
-                                     class="upload-img"
-                                     :id="'ViewerGoodsImages'+index"
-                                     @click="showViewerImageFn2(index)"
-                                >
-                                <i class="icon mIcon del" @click="removeGoodsImagesFn(index)"></i>
-                            </div>
-                            <div class="upload-file" v-show="GoodsImagesList.length<5">
-                                <i class="icon mIcon 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 class="form-upload-tips">
-                                <i class="icon mIcon icon-wen"></i>
-                                <div class="wen-tips">最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</div>
-                            </div>
-                        </div>
-                    </div>
-                    <span class="release-tips errTips icon mIcon" v-show="vShow_GoodsImages">{{fromMessage}}</span>
-                </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="release-button">
-                    <div class="buttton-main">
-                        <div class="text">
-                            <input type="checkbox" @click="changeBox"/>
-                            已阅读并同意采美
-                            <span><a href="/help/1039.html" target="_blank" style="color: #1890F9;">《二手出让协议》</a></span>
-                            <span class="release-tips errTips icon mIcon" v-show="vShow_checkBox">{{fromMessage}}</span>
-                        </div>
-                        <button type="button" @click="submitBtn" id="btn-submit">发布</button>
-                    </div>
-                </div>
-            </form>
-
-        </div>
-        <div class="secondBj thebj" v-show="PopupShow" :class="PopupShow ? 'show' :'' ">
-            <div class="bjmain theresult">
-                <span class="title">提示</span>
-                <p>{{ tipsContentText }}</p>
-                <div class="paybtn">
-                    <span class="cancel closebtn" @click="confirmButtonFn">{{ confirmButtonText }}</span>
-                    <span class="thegopay gozhofubao" @click="cancelButtonFn">{{ cancelButtonText }}</span>
-                </div>
-                <div class="close closebtn" @click="closePopupShow">×</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/serviceapi/second.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/form.js(v=${version})}"></script>
-</body>
-</html>
+<!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>
+    <link th:href="@{/css/flea-market/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 二手商品发布 -->
+<div id="fleaMarketForm" v-cloak="">
+<!--    <div class="bannerimg"><img src="/img/flea-market/banner@2x.png" v-if="isPC"><img-->
+<!--            src="/img/flea-market/banner3.png " v-else></div>-->
+    <div class="my-maintenance" id="secondHandrelease">
+        <div class="mt-top"><span class="mt-title">发布二手仪器</span></div>
+<!--        <div class="newsTitle">-->
+<!--            <p>-->
+<!--                欢迎您来到采美365网二手商品市场，您可以在这里发布二手仪器和产品，采美官方 人员将会对商品进行审核和专业的估价，估价完成后才能上架展示并销售，展示期为 3个月。为了完整展示您的商品，请您认真填写以下商品基本信息，谢谢合作。-->
+<!--            </p>-->
+<!--        </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="secondradio">
+                    <div v-for="(item,index) in publisherActions"
+                         @click="hadldPublishIdentity(item)"
+                         :class="handleCurrent==item.value?'select active':''" class="icon mIcon ">
+                        {{item.name}}
+                    </div>
+                    <span class="release-tips  errTips icon mIcon"
+                          v-show="vShow_PublishIdentity">{{fromMessage}}</span>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_contactName">
+                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>联系人：
+                    </div>
+                    <input type="text" maxlength="15" v-model="secondParams.contactName" id="linkman"
+                           placeholder="请输入联系人姓名">
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_contactName">{{fromMessage}}</span>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_contactMobile">
+                    <div class="unlogin-label spacing"><span class="red-color">*</span>联系方式：</div>
+                    <input type="text" v-model="secondParams.contactMobile"
+                           oninput="value=value.replace(/[^\d]/g,'')"
+                           @blur="handleMobileInput"
+                           id="phoneNum" maxlength="11" placeholder="请输入联系人手机号">
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_contactMobile">{{fromMessage}}</span>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_checkCode">
+                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>验证码：</div>
+                    <input class="code" type="text"  maxlength="6" v-model="secondParams.checkCode"   @blur="handleMobileCodeInput" placeholder="请输入验证码">
+                    <a class="getCode" href="javascript:void(0);" @click="getNewMobileCodeFn" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_checkCode">{{fromMessage}}</span>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing none" id="vShow_currentId">
+                    <div class="unlogin-label spacing"><span class="red-color">*</span>分类：</div>
+                </div>
+                <div class="secondradio" id="vShowsecondHandType">
+                    <div v-for="(item,index) in fenlei"
+                         @click="secondHandRidio(item)"
+                         :class="currentId==item.value?'select active':''" class="icon mIcon ">
+                        {{item.name}}
+                    </div>
+                    <span class="release-tips  errTips icon mIcon" v-show="vShow_secondHandType">{{fromMessage}}</span>
+                </div>
+                <div class="secondradio" v-if="isShow">
+                    <div v-for="(item ,index) in radioList" :key="index" :class="item.isChecked ? 'select active':''"
+                         @click="secondHandType(item)" class="icon mIcon ">
+                        {{item.name}}
+                    </div>
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_instrumentType">{{fromMessage}}</span>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_BrandID">
+                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品品牌：
+                    </div>
+
+                    <div class="select" @click="showBrand">
+                        <span class="placeholder"><i class="icon brand mIcon"></i>{{ brandname }}</span>
+                        <ul v-show="selectBrand">
+                            <li v-for="(item,index) in BrandList" :key="index" :value='item.id'
+                                @click="ChangeBrand(item)">{{item.name}}
+                            </li>
+                        </ul>
+                    </div>
+                    <input type="text" v-show="shoplogoTwo" v-model="secondParams.brandName" maxlength="20"
+                           id="shoplogoTwo" placeholder="请输入商品品牌">
+                    <div class="release-tips errTips icon mIcon" v-show="vShow_BrandID">{{fromMessage}}</div>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_Name">
+                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品名称：
+                    </div>
+                    <input type="text" maxlength="40" id="shopname" v-model="secondParams.name"
+                           placeholder="请输入商品名称，不超过40个汉字">
+                    <div class="release-tips errTips icon mIcon" v-show="vShow_Name">{{fromMessage}}</div>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_FixedYears">
+                    <div class="unlogin-label spacing" style="letter-spacing: 1px;">出厂日期：</div>
+                    <input type="text" v-model="secondParams.fixedYears" id="shopyear" maxlength="10"
+                           placeholder="请输入出厂日期 如：2020年06月">
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" v-if="secondParams.publishIdentity == 2">
+                    <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>公司名称：</div>
+                    <input type="text" v-model="secondParams.companyName" id="mechanismname" maxlength="30"
+                           placeholder="请输入公司名称，不超过30个汉字">
+                    <div class="release-tips errTips icon mIcon" v-show="vShow_companyName">{{fromMessage}}</div>
+                </div>
+                <div class="unlogin-item input-item shrink-spacing" id="vShow_shopColor">
+                    <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"
+                           placeholder="请输入商品成色，如“9成新”">
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_shopColor">{{fromMessage}}</span>
+                </div>
+<!--                <div class="unlogin-item input-item shrink-spacing">-->
+<!--                    <div class="unlogin-label spacing">商品类型：</div>-->
+<!--                    <div class="secondradio">-->
+<!--                        <div class="buy icon mIcon" v-for="(item ,index) in beauty" :key='index' value="item.value"-->
+<!--                             @click="getProductType(item.value)" :class="secondType==item.value?'select active':''">-->
+<!--                            {{item.name}}-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                </div>-->
+                <div class="unlogin-item input-item address-item shrink-spacing" id="vShow_Address">
+                    <div class="unlogin-label spacing"><span class="red-color">*</span>联系地址：</div>
+                    <i class="province icon mIcon selected"></i>
+                    <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.id'>{{item.name}}
+                        </option>
+                    </select>
+                    <i class="cCity icon mIcon selected"></i>
+                    <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.id">{{item.name}}</option>
+                    </select>
+                    <i class="cTown icon mIcon selected"></i>
+                    <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.id">{{item.name}}</option>
+                    </select>
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_TownId">{{fromMessage}}</span>
+                    <textarea type="text" id="addressDetails" class="border-grey address-details"
+                              v-model="secondParams.address" maxlength="50"
+                              @blur="handleMobileAddresInput"
+                              placeholder="请填写详细地址，如街道/小区/门牌等"/></textarea>
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_Address">{{fromMessage}}</span>
+                </div>
+                <div class="release-main-container">
+                    <div class="release-from">
+                        <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">
+                                <img :data-original='item'
+                                     :src="item"
+                                     :data-image="item"
+                                     alt="商品图片"
+                                     class="upload-img"
+                                     :id="'ViewerGoodsImages'+index"
+                                     @click="showViewerImageFn2(index)"
+                                >
+                                <i class="icon mIcon del" @click="removeGoodsImagesFn(index)"></i>
+                            </div>
+                            <div class="upload-file" v-show="GoodsImagesList.length<5">
+                                <i class="icon mIcon 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 class="form-upload-tips">
+                                <i class="icon mIcon icon-wen"></i>
+                                <div class="wen-tips">最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</div>
+                            </div>
+                        </div>
+                    </div>
+                    <span class="release-tips errTips icon mIcon" v-show="vShow_GoodsImages">{{fromMessage}}</span>
+                </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="release-button">
+                    <div class="buttton-main">
+                        <div class="text">
+                            <input type="checkbox" @click="changeBox"/>
+                            已阅读并同意采美
+                            <span><a href="/help/1039.html" target="_blank" style="color: #1890F9;">《二手出让协议》</a></span>
+                            <span class="release-tips errTips icon mIcon" v-show="vShow_checkBox">{{fromMessage}}</span>
+                        </div>
+                        <button type="button" @click="submitBtn" id="btn-submit">发布</button>
+                    </div>
+                </div>
+            </form>
+
+        </div>
+        <div class="secondBj thebj" v-show="PopupShow" :class="PopupShow ? 'show' :'' ">
+            <div class="bjmain theresult">
+                <span class="title">提示</span>
+                <p>{{ tipsContentText }}</p>
+                <div class="paybtn">
+                    <span class="cancel closebtn" @click="confirmButtonFn">{{ confirmButtonText }}</span>
+                    <span class="thegopay gozhofubao" @click="cancelButtonFn">{{ cancelButtonText }}</span>
+                </div>
+                <div class="close closebtn" @click="closePopupShow">×</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/serviceapi/second.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/form.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -1,150 +1,157 @@
-<!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>
-    <link th:href="@{/css/flea-market/list.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 二手商品列表 -->
-<div id="fleaMarketList">
-     <div v-if="listLoading" class="loading">
-            <img src="/img/base/loading.gif">
-     </div>
-     <template v-else>
-        <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" @click="handle('1')" :class="[currentId == '1' ? 'active':'',currentId == '1' ? 'jqSelect':'']">
-                        {{ tabTitleName }}
-                    </li>
-                    <li class="ClassA icon" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'jqSelect':'']">
-                        其他
-                    </li>
-                    <div class="right-btn">
-                        <li class="intro">
-                            <a href="/flea-market/intro.html">二手市场介绍</a>
-                        <li/>
-                        <li class="fabu">
-                            <a href="/flea-market/form.html" onclick="_czc.push(['_trackEvent','二手市场列表','我要发布','点击','','Um_Event_SecondReleaseSubmit'])">我要发布</a>
-                        <li/>
-                    </div>
-                </ul>
-                <ul class="secondTitle" v-else>
-                    <li class="ClassA mIcon off" @click="handle('1')" :class="currentId == '1' ? 'active':''">
-                        {{ tabTitleName }}
-                        <span class="line" v-if="currentId == '1'"></span>
-                    </li>
-                    <li class="ClassA" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'off':'']">
-                        其他
-                        <span class="line" v-if="currentId == '3'"></span>
-                    </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">
-                    <a class="itemImg onhref" :href="'/flea-market-'+item.productId+'.html'">
-                        <img :src="item.imageList[0]" :class="item.sold==1?'activeImg':''" class="bigImg">
-                    </a>
-                    <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.brandID!=161">{{item.brandName}}</span>
-                            <span class="infotag sold " v-if="item.sold==1">已售</span>
-                            <span class="infotag other" v-if="item.brandID==161&&item.brandName!=''&&item.brandName!=null">{{item.brandName}}</span>
-                        </div>
-                        <a class="productname" :href="'/flea-market-'+item.productId+'.html'">
-                            {{item.name}}
-                        </a>
-                        <div class="targetprice">
-                            <span v-if="item.detailTalkFlag ==2 && userId == 0">
-                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>
-                                <span v-else>￥价格详聊</span>
-                            </span>
-                            <span v-else-if="userId == 0" class="priceparam " @click="toLogin" onclick="_czc.push(['_trackEvent','二手市场列表','登录查看价格','点击','','Um_Event_SecondListLoginSubmit'])">
-                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>
-                                <span v-else>登录查看价格></span>
-                            </span>
-                            <span v-else-if="userId>0 && item.detailTalkFlag==2">
-                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>
-                                <span v-else>￥价格详聊</span>
-                            </span>
-                            <span v-else>
-                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>
-                                <span v-else>￥{{ item.price }}</span>
-                            </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 class="fabu" v-if="!isPC">
-                 <a class="intro" href="/flea-market/intro.html">
-                     <p>二手市场介绍</p>
-                 </a>
-                 <a class="form" href="/flea-market/form.html">
-                     <p>我要发布</p>
-                 </a>
-            </div>
-            <div v-if="(!isPC) && isScroll" class="scroll-load">
-                <div class="icon-load">
-                    <img src="/img/base/icon-loading.gif" alt="">
-                    <span>加载中~</span>
-                </div>
-            </div>
-            <div v-if="(!isPC) && !hasNextPage" class="noMore">----  没有更多了 ----</div>
-        </div>
-    </template>
-    <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/serviceapi/second.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/list.js(v=${version})}"></script>
-</body>
-</html>
+<!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>
+    <link th:href="@{/css/flea-market/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 二手商品列表 -->
+<div id="fleaMarketList" v-cloak>
+     <div v-if="listLoading" class="loading">
+            <img src="/img/base/loading.gif">
+     </div>
+     <template v-else>
+        <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" @click="handle('1')" :class="[currentId == '1' ? 'active':'',currentId == '1' ? 'jqSelect':'']">-->
+<!--                        {{ tabTitleName }}-->
+<!--                    </li>-->
+<!--                    <li class="ClassA icon" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'jqSelect':'']">-->
+<!--                        其他-->
+<!--                    </li>-->
+<!--                    <div class="right-btn">-->
+<!--                        <li class="intro">-->
+<!--                            <a href="/flea-market/intro.html">二手发布介绍</a>-->
+<!--                        <li/>-->
+<!--                        <li class="fabu">-->
+<!--                            <a href="javascript:void(0)" @click="handleForm">我要发布</a>-->
+<!--                        <li/>-->
+<!--                    </div>-->
+<!--                </ul>-->
+<!--                <ul class="secondTitle" v-else>-->
+<!--                    <li class="ClassA mIcon off" @click="handle('1')" :class="currentId == '1' ? 'active':''">-->
+<!--                        {{ tabTitleName }}-->
+<!--                        <span class="line" v-if="currentId == '1'"></span>-->
+<!--                    </li>-->
+<!--                    <li class="ClassA" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'off':'']">-->
+<!--                        其他-->
+<!--                        <span class="line" v-if="currentId == '3'"></span>-->
+<!--                    </li>-->
+<!--                </ul>-->
+<!--            </template>-->
+            <div class="second-fixed-title" v-if="isPC">
+                <div class="inner">
+                    <div class="second-fixed-btn">
+                        我要发布
+                    </div>
+                </div>
+            </div>
+            <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">
+                    <a class="itemImg onhref" :href="'/flea-market-'+item.productId+'.html'">
+                        <img :src="item.imageList[0]" :class="item.sold==1?'activeImg':''" class="bigImg">
+                    </a>
+                    <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.brandID!=161">{{item.brandName}}</span>
+                            <span class="infotag sold " v-if="item.sold==1">已售</span>
+                            <span class="infotag other" v-if="item.brandID==161&&item.brandName!=''&&item.brandName!=null">{{item.brandName}}</span>
+                        </div>
+                        <a class="productname" :href="'/flea-market-'+item.productId+'.html'">
+                            {{item.name}}
+                        </a>
+<!--                        <div class="targetprice">-->
+<!--                            <span v-if="item.detailTalkFlag ==2 && userId == 0">-->
+<!--                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>-->
+<!--                                <span v-else>￥价格详聊</span>-->
+<!--                            </span>-->
+<!--                            <span v-else-if="userId == 0" class="priceparam " @click="toLogin" onclick="_czc.push(['_trackEvent','二手市场列表','登录查看价格','点击','','Um_Event_SecondListLoginSubmit'])">-->
+<!--                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>-->
+<!--                                <span v-else>登录查看价格></span>-->
+<!--                            </span>-->
+<!--                            <span v-else-if="userId>0 && item.detailTalkFlag==2">-->
+<!--                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>-->
+<!--                                <span v-else>￥价格详聊</span>-->
+<!--                            </span>-->
+<!--                            <span v-else>-->
+<!--                                <span v-if="item.sold == 1">&nbsp;&nbsp;&nbsp;</span>-->
+<!--                                <span v-else>￥{{ item.price }}</span>-->
+<!--                            </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 class="fabu" v-if="!isPC">
+                 <a class="intro" href="/flea-market/intro.html">
+                     <p>二手市场介绍</p>
+                 </a>
+                 <a class="form" href="javascript:void(0)" @click="handleForm">
+                     <p>我要发布</p>
+                 </a>
+            </div>
+            <div v-if="(!isPC) && isScroll" class="scroll-load">
+                <div class="icon-load">
+                    <img src="/img/base/icon-loading.gif" alt="">
+                    <span>加载中~</span>
+                </div>
+            </div>
+            <div v-if="(!isPC) && !hasNextPage" class="noMore">----  没有更多了 ----</div>
+        </div>
+    </template>
+    <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/serviceapi/second.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/list.js(v=${version})}"></script>
+</body>
+</html>