二手发布

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

@@ -1,4 +1,5 @@
 body{background: #fff}
+.errcolor{border: 1px solid red}
  @media screen and (min-width:768px) {
      #secondHandrelease {
          width: 1184px;
@@ -552,84 +553,85 @@ body{background: #fff}
  */
  @media screen and (max-width:768px){
   #secondHandrelease {
-         width:100vw;
-         margin: auto;
+         padding: 2.7vw;
      }
-
+    .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
+        line-height: 17.3vw;
+        color: #22272e;
+        text-align: left;
+        font-size: 5vw;
+        font-weight: bold;
+        height: 17.3vw
      }
 
      .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: #e15616
+        line-height: 6.4vw;
+        text-align: left;
+        color: #e15616;
+        padding: 2.7vw;
+        background-color: rgba(225, 86, 22, .1)
      }
 
      .mt-bottom {
-         width: 50%;
-         margin: 20px auto;
+         margin: 5.3vw auto;
      }
 
      #mt-form {
          position: relative;
          overflow: hidden;
+         width: 93.4vw;
+         margin: auto
      }
 
      .unlogin-label {
-         width: 146px;
-         margin-bottom: 10px;
-         color: #627386;
-         padding-left: 10px;
+        width: 39vw;
+        margin-bottom: 2.7vw;
+        color: #627386;
+        padding-left: 2.7vw
      }
 
      .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;
-
+         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 20px;
+         margin: 0 5.3vw;
      }
 
      .secondradio div.active {
          color: #e15616;
-         border: solid 1px #e15616;
+         border: solid .27vw #e15616;
      }
 
      .secondradio div.buy {
-         width: 180px;
+         width: 39.2vw;
      }
 
-     .icon.select:before {
-         background-position: -207px -254px;
-         width: 22px;
-         height: 19px;
-         position: absolute;
-         bottom: 0;
-         left: 133px
+     .mIcon.select:before {
+            background-position: -75.5vw -8.8vw;
+            width: 5.3vw;
+            height: 4.8vw;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            transition: none;
      }
 
-     .icon.buy:before {
-         left: 159px;
+     .mIcon.buy:before {
+         left: 34vw;
      }
 
      .secondradio {
@@ -652,7 +654,7 @@ body{background: #fff}
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
-         top: 74px;
+         top: 20.8vw;
          right: 50%;
          border-bottom: 10px solid #1890f9;
          position: absolute
@@ -669,17 +671,18 @@ body{background: #fff}
 
      #shoplogoTwo {
          height: 36px;
-         margin-top: 10px;
+         margin-top: 2.7vw;
      }
 
      .login-form input[type="text"] {
-         width: 496px;
-         height: 36px;
-         background-color: #ffffff;
-         border-radius: 2px;
-         border: solid 1px #b8bfca;
-         padding-left: 10px;
-         color: #9aa5b5;
+             width: 100% !important;
+            height: 9.6vw;
+            background-color: #ffffff;
+            border-radius: .53vw;
+            border: solid 1px #b8bfca;
+            padding-left: 2.7vw;
+            color: #9aa5b5;
+            box-sizing: border-box
      }
 
      input[type="text"]::placeholder, textarea::placeholder {
@@ -695,28 +698,32 @@ body{background: #fff}
      }
 
      .address-input {
-         width: 155px;
-         height: 36px;
-         background-color: #ffffff;
-         border-radius: 2px;
-         border: solid 1px #b8bfca;
-         padding-left: 10px;
-         color: #9aa5b5;
-     }
+        width: 28.5vw;
+        height: 10.7vw;
+        background-color: #ffffff;
+        border-radius: .53vw;
+        border: solid 1px #b8bfca;
+        padding-left: 6.7vw;
+        color: #9aa5b5
+     }
+      .address-item i{
+        position: relative;
+      }
 
      .address-input.city {
-         margin: 0 18px;
+         margin: 0 2.6vw;
      }
 
      .border-grey {
-         width: 496px;
-         height: 114px;
-         background-color: #ffffff;
-         border-radius: 2px;
-         border: solid 1px #b8bfca;
-         margin-top: 20px;
-         resize: none;
-         padding: 10px
+        width: 100%;
+        height: 56.3vw;
+        background-color: #ffffff;
+        border-radius: .53vw;
+        border: solid .27vw #b8bfca;
+        margin-top: 5.3vw;
+        resize: none;
+        padding: 2.7vw;
+        box-sizing: border-box
      }
 
      #description {
@@ -724,17 +731,14 @@ body{background: #fff}
      }
 
      .upload-file {
-         position: relative;
-         float: left;
-         margin: 10px 10px 10px 0px;
-         cursor: pointer;
-         width: 80px;
-         height: 80px;
-         border-radius: 2px;
-         border: solid 1px #b8bfca;
-     }
-
-     .icon-add {
+        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
      }
 
      .input-file {
@@ -770,32 +774,33 @@ body{background: #fff}
      }
 
      #uploadGoodsImages {
-         width: 496px;
+        width: 100%;
+        overflow: auto;
      }
 
-     .icon.add:before {
-         width: 25px;
-         height: 25px;
-         background-position: -168px -374px;
-         position: absolute;
-         top: 17px;
-         right: 29px;
+     .mIcon.add:before {
+        width: 6.7vw;
+        height: 6.7vw;
+        background-position: -8.8vw -61vw;
+        position: absolute;
+        top: 4.5vw;
+        right: 7.2vw
      }
 
-     .icon.del:before {
-         width: 20px;
-         height: 20px;
-         background-position: -116px -138px;
-         position: absolute;
-         top: -3px;
-         right: -3px;
+     .mIcon.del:before {
+        width: 5.3vw;
+        height: 5.3vw;
+        background-position: -89.6vw -7.7vw;
+        position: absolute;
+        top: -1vw;
+        right: -.8vw
      }
 
      .form-upload-tips .icon-wen:before {
-         width: 20px;
-         height: 20px;
-         background-position: -84px -144px;
-         cursor: pointer;
+            width: 5.3vw;
+            height: 6.3vw;
+            background-position: -76.5vw 0px;
+            cursor: pointer;
      }
 
      .form-upload-tips .wen-tips:before {
@@ -806,32 +811,29 @@ body{background: #fff}
          border-style: solid;
          border-color: transparent transparent #1890f9 transparent;
          position: absolute;
-         top: -15px;
-         right: 31px;
+         top: -4vw;
+         left: 27.2vw;
      }
 
      .form-upload-tips {
-         width: 20px;
-         height: 90px;
+         width: 5.3vw;
          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;
-         right: -32px;
-         border-radius: 3px;
-         display: none;
+        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 {
@@ -851,45 +853,45 @@ body{background: #fff}
      }
 
      .textarea-wrapper {
-         letter-spacing: 1.5px;
-         line-height: 24px;
-         color: #627386;
-         position: relative;
-         width: 496px;
+        letter-spacing: .4vw;
+        line-height: 6.4vw;
+        color: #627386;
+        position: relative;
+        width: 100%;
+        font-size: 3.2vw
      }
 
      .BtnAll {
          margin-top: 30px;
-         width: 520px;
+         width: 100%;
          overflow: hidden
      }
 
      .BtnAll button {
-         width: 232px;
-         height: 50px;
-         border-radius: 2px;
-         line-height: 50px;
-         text-align: center;
-         font-size: 18px;
-         cursor: pointer;
+        width: 100%;
+        height: 15vw;
+        border-radius: .53vw;
+        line-height: 15vw;
+        text-align: center;
+        font-size: 4.5vw;
+        cursor: pointer;
+        margin-bottom: 2.7vw;
+        box-sizing: border-box;
      }
 
      .Read {
-         border: solid 1px #e15616;
+         border: solid .27vw #e15616;
          background-color: #ffe6dc;
          color: #e15616;
-         float: left;
-         position: relative;
      }
 
      #btn-submit {
          background-color: #e15616;
          color: #fff;
-         float: right;
      }
 
      input[type=checkbox] {
-         margin-right: 10px;
+        margin: 1.27vw 7px 0px -14px;
      }
 
      select {
@@ -898,32 +900,32 @@ body{background: #fff}
          -webkit-appearance: none;
      }
 
-     .icon.selected:before {
-         width: 25px;
-         height: 25px;
-         background-position: -87px 11px;
-         position: absolute;
-         right: 87px
+     .mIcon.selected:before {
+         width: 6.7vw;
+        height: 6.7vw;
+        background-position: -49vw 2.4vw;
+        position: absolute;
+        right: -27vw
      }
 
-     .icon.province:before {
-         left: 125px;
+     .mIcon.province:before {
+        right: -26.4vw;
      }
 
-     .icon.cCity:before {
-         right: 263px;
+     .mIcon.cCity:before {
+         right: -28.8vw;
      }
 
      /**/
      .select {
-         position: relative;
-         display: block;
-         width: 508px;
-         color: #9aa5b5;
-         vertical-align: middle;
-         text-align: left;
-         height: 36px;
-         user-select: none
+             position: relative;
+            display: block;
+            width: 100%;
+            color: #9aa5b5;
+            vertical-align: middle;
+            text-align: left;
+            height: 9.6vw;
+            user-select: none
      }
 
      .select .placeholder {
@@ -955,20 +957,17 @@ body{background: #fff}
      }
 
      .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;
+             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 {
@@ -986,17 +985,18 @@ body{background: #fff}
 
      .release-tips {
          display: block;
-         height: 20px;
-         line-height: 20px;
+         height: 5.3vw;
+         line-height: 5.3vw;
          white-space: nowrap;
          color: red;
-         font-size: 12px
+         font-size:3.2vw;
+         margin-top: 1.7vw;
      }
 
-     .icon.errTips:before {
-         width: 20px;
-         height: 20px;
-         background-position: -172px -296px;
+     .mIcon.errTips:before {
+         width: 5.3vw;
+         height: 5.3vw;
+         background-position: -25.9vw -8.8vw;
          vertical-align: top;
      }
 
@@ -1017,76 +1017,74 @@ body{background: #fff}
      }
 
      .theresult {
-         position: fixed;
-         left: 50%;
-         top: 50%;
-         margin-top: -150px;
-         margin-left: -243px;
-         width: 400px;
-         /*padding: 15px 15px 0;*/
-         background-color: #fff;
-         border-radius: 2px;
-         height: 215px
-     }
-
-     .theresult p:nth-child(1) {
-         color: #627386;
+        position: absolute;
+        right: 14%;
+        top: 30%;
+        width: 63.7vw;
+        background-color: #fff;
+        border-radius: .53vw;
+        padding: 2.7vw;
+     }
+
+     .theresult span{
+         padding: 5px 0;
+        border-bottom: 1px solid #e2e7ef;
+        width: 100%;
+        display: block;
+        color: #627386
      }
 
      .theresult p {
-         font-size: 14px;
-         color: #22272e;
-         line-height: 25px;
-         padding: 15px 15px 0;
+        font-size: 3.7vw;
+        color: #22272e;
+        line-height: 6.7vw;
+        padding: 2vw 2vw
      }
 
      .paybtn {
-         font-size: 0;
-         padding-left: 152px
+         width: 100%;
      }
 
      .paybtn span {
-         display: inline-block;
-         text-align: center;
-         margin: 15px 0 0 10px;
-         font-size: 14px;
-         cursor: pointer;
+             display: block;
+            text-align: center;
+            font-size: 3.7vw;
+            cursor: pointer;
      }
 
      .paybtn .cancel {
-         border-right: 1px solid #F2F2F2;
-         width: 72px;
-         height: 32px;
-         background: rgba(225, 86, 22, 1);
-         color: #fff;
-         line-height: 32px;
-         border-radius: 2px;
+            margin: 2.7vw 0;
+            width: 100%;
+            height: 9.9vw;
+            background: rgba(225, 86, 22, 1);
+            color: #fff;
+            line-height: 9.9vw;
+            border-radius: .53vw
      }
 
      .paybtn .thegopay {
-         border: 1px solid #E0E0E0;
-         width: 130px;
-         height: 32px;
-         line-height: 32px;
-         border-radius: 2px;
-         color: #333333;
-         padding: 0 5px 0 5px
+        border: 1px solid #E0E0E0;
+        height: 8.5vw;
+        line-height: 8.5vw;
+        border-radius: .53vw;
+        color: #333333;
+        padding: 0 1.3vw 0 1.3vw
      }
 
      .gosecond {
          color: #1683E1;
-         border-right: 1px solid #F2F2F2;
+         border-right: .27vw solid #F2F2F2;
      }
 
      .close {
          position: absolute;
          right: 0;
          top: 0;
-         width: 40px;
-         height: 40px;
-         line-height: 40px;
+         width: 10.7vw;
+         height: 10.7vw;
+         line-height: 10.7vw;
          text-align: center;
          cursor: pointer;
-         font-size: 24px;
+         font-size: 6.4vw;
      }
  }

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

@@ -1,5 +1,6 @@
-var secondHandrelease = new Vue({
-    el:'#secondHandrelease',
+var isPC = ($(window).width()>768);
+var fleaMarketForm = new Vue({
+    el:'#fleaMarketForm',
     data:{
         fenlei:[
             {name:'二手仪器',value:'1'},

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

@@ -12,7 +12,7 @@
 
 <!-- 二手商品发布 -->
 <div id="fleaMarketForm">
-     <div class="bannerimg"><img src="/img/flea-market/banner@2x.png"></div>
+     <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>
@@ -121,17 +121,17 @@
                     </div>
                     <div class="unlogin-item input-item address-item shrink-spacing" id="Address">
                         <div class="unlogin-label spacing"><span class="red-color">*</span>联系地址：</div>
-                        <i class="province icon selected"></i>
+                        <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.provinceID' >{{item.name}}</option>
                     </select>
-                    <i class="cCity icon selected"></i>
+                    <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.cityID" >{{item.name}}</option>
                     </select>
-                    <i class="cTown icon selected"></i>
+                    <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.townID"  >{{item.name}}</option>
@@ -154,7 +154,7 @@
                                     <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 icon-wen"></i>
+                                    <i class="icon mIcon icon-wen"></i>
                                     <div class="wen-tips">最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</div>
                                 </div>
                             </div>
@@ -186,7 +186,7 @@
 
              <div class="secondBj thebj"   v-show="vShow_secondBj" :class="vShow_secondBj?'show':''">
                     <div class="bjmain theresult">
-                        <p>收费</p>
+                        <span>提示</span>
                         <p>发布二手商品，采美需要收取您每个商品100元的展示费，展示期为6个月</br>
                             支付完成后，商品会在1-2个工作日内进行审核，审核通过后，商品会立即上线</p>
                         <div class="paybtn">