Browse Source

fix: 全局样式调整

周玉环 3 days ago
parent
commit
5c28cb666c

+ 58 - 30
xinkeaboard-web/assets/style/store/storeHeader.scss

@@ -3,11 +3,11 @@
 .sld_store_header {
   background: #F6F8FA;
   .container {
-    width: 1210px;
-    margin: 0 auto;
-    padding-left: 0px;
-    padding-right: 0px;
-    height: 99px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 240px;
+    height: 80px;
     position: relative;
     z-index: 12;
 
@@ -17,9 +17,10 @@
     }
 
     .left {
-      position: relative;
-      float: left;
-      width: 385px;
+      display: flex;
+      align-items: center;
+      max-width: 385px;
+      height: 100%;
 
       .sld_img_center {
         display: block;
@@ -51,10 +52,8 @@
 
       .sld_store_rate {
         position: relative;
-        margin-top: 8px;
+        margin-left: 20px;
         cursor: pointer;
-        min-height: 75px;
-        line-height: 75px;
         &:hover {
           .sld_store_info_more {
             display: block !important;
@@ -70,6 +69,8 @@
         }
 
         .name {
+          display: flex;
+          align-items: center;
           color: #555555;
           font-size: 16px;
           font-weight: 600;
@@ -79,7 +80,7 @@
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
-            width: 160px;
+            max-width: 160px;
             display: inline-block;
           }
         }
@@ -108,9 +109,9 @@
           -ms-transform: translateY(5px);
           -o-transform: translateY(5px);
           transform: translateY(5px);
-          position: absolute;
-          right: -10px;
-          top: 38px;
+          // position: absolute;
+          // right: -10px;
+          // top: 38px;
         }
 
         .sld_store_info_more {
@@ -218,17 +219,40 @@
     }
 
     .search_wrap {
-      width: calc(100% - (585px + 60px));
-      float: left;
-      padding-top: 4px;
-      margin-top: 30px;
-      margin: 30px 30px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      // width: calc(100% - (585px + 60px));
+      // float: left;
+      // padding-top: 4px;
+      // margin-top: 30px;
+      // margin: 30px 30px 0;
       position: relative;
+
+      &-content {
+        width: 536px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        // padding: 0 20px;
+      }
       form {
+        // width: 400px;
+        display: flex;
+        flex: 1;
+        width: 100%;
+        overflow: hidden;
         border: 2px solid $colorMain;
-        width: calc(100% - 103px);
         .text {
-          width: calc(100% - 103px);
+          width: 100%;
+          flex: 1;
+          overflow: hidden;
+          // width: calc(100% - 103px);
           -webkit-appearance: none;
           -webkit-border-radius: 0;
           height: 34px;
@@ -261,7 +285,7 @@
         cursor: pointer;
 
         &.fl {
-          height: 37px;
+          height: 38px;
         }
       }
 
@@ -471,14 +495,15 @@
   }
 
   .sld_cart_wrap {
-    float: right;
-    position: relative;
     z-index: 99;
     width: 200px;
-    height: 40px;
-    margin-top: 34px;
-    text-align: right;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     dl {
+      width: 100%;
+      text-align: center;
       margin-bottom: 0px;
 
       .cart_goods_num {
@@ -495,7 +520,7 @@
       }
 
       dt {
-        position: absolute;
+        // position: absolute;
         z-index: 3;
         height: 38px;
         background-color: #fff;
@@ -504,7 +529,7 @@
 
 
         .iconfont {
-          margin: 0 8px 0 12px;
+          margin: 0 8px 0 0px;
           color: $colorMain;
           font-weight: 600;
           vertical-align: bottom;
@@ -523,6 +548,9 @@
         }
 
         &.cart_icon_text_wrap {
+          display: flex;
+          align-items: center;
+          justify-content: center;
           a {
             color: $colorMain;
             font-size: 14px;

+ 7 - 7
xinkeaboard-web/components/Home/sourcingForm.vue

@@ -7,8 +7,8 @@
       <el-form-item v-if="contactType === 'email'" prop="email">
         <el-input v-model="form.email" :placeholder="L['请输入邮箱']" />
       </el-form-item>
-      <el-form-item v-if="contactType === 'mobile'" prop="mobile">
-        <el-input v-model="form.mobile" :placeholder="L['请输入手机号']" />
+      <el-form-item v-if="contactType === 'mobile'" prop="phone">
+        <el-input v-model="form.phone" :placeholder="L['请输入手机号']" />
       </el-form-item>
       <el-form-item prop="quantity">
         <el-input-number
@@ -72,7 +72,7 @@ const form = reactive({
   name: "",
   message: "",
   email: "",
-  mobile: '',
+  phone: '',
   quantity: undefined,
 });
 const email = computed(() => filtersStore.getMemberInfo.memberEmail ?? "");
@@ -81,7 +81,7 @@ const name = computed(
     filtersStore.getMemberInfo.memberNickName ||
     filtersStore.getMemberInfo.memberName
 );
-const mobile = computed(() => filtersStore.getMemberInfo.memberMobile ?? "")
+const phone = computed(() => filtersStore.getMemberInfo.memberMobile ?? "")
 
 const checkEmailFun = (rule, value, callback) => {
   if (checkEmail(value) !== true) {
@@ -106,7 +106,7 @@ const rules = reactive({
     { required: true, message: L["请输入邮箱"], trigger: "blur" },
     { validator: checkEmailFun, trigger: "blur" },
   ],
-  mobile: [
+  phone: [
     { required: true, message: L["请输入手机号"], trigger: "blur" },
     { validator: checkMobileFun, trigger: "blur" },
   ],
@@ -186,9 +186,9 @@ onMounted(() => {
     form.name = data.name;
     form.message = data.message;
     form.quantity = data.quantity;
-    form.mobile = data.mobile;
+    form.phone = data.phone;
   } else {
-    form.mobile = mobile.value;
+    form.phone = phone.value;
     form.email = email.value;
     form.name = name.value;
   }

+ 24 - 25
xinkeaboard-web/components/MemberTop.vue

@@ -41,7 +41,9 @@
               @click="search"
             />
           </div>
-          <div class="fl sld_cart_part">
+        
+        </div>
+        <div class="sld_cart_part">
             <dl>
               <dt class="ld first_dt center_text">
                 <span class="iconfont">   <img style="width:20px;position:relative; top:3px" src="/email.svg"/> </span>
@@ -56,7 +58,6 @@
                 <cart-model></cart-model>
               </dd> -->
             </dl>
-          </div>
         </div>
       </div>
     </div>
@@ -118,14 +119,12 @@ watchEffect(() => {
   .sld_member_top_zoom {
     width: 100%;
     background: #F6F8FA;
-    margin-bottom: 10px;
-    padding-left: 100px;
 
     .container {
-      width: 1210px;
-      margin: 0 auto;
-      padding-left: 0px;
-      padding-right: 0px;
+      width: 100%;
+      padding: 0 240px;
+      display: flex;
+      align-items: center;
 
       &:after,
       &:before {
@@ -134,11 +133,15 @@ watchEffect(() => {
       }
 
       .fl {
-        float: left;
       }
 
       .fr {
-        float: right;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        width: 100%;
+        overflow: hidden;
       }
     }
 
@@ -149,7 +152,7 @@ watchEffect(() => {
         float: left;
         width: 127px;
         height: 60px;
-        margin: 5px 35px 0px 0px;
+        // margin: 5px 35px 0px 0px;
 
         img {
           cursor: pointer;
@@ -333,20 +336,12 @@ watchEffect(() => {
     }
 
     .sld_cart_part {
-      float: right;
-      position: relative;
       z-index: 99;
       width: 150px;
-      height: 40px;
-      margin-top: 16px;
-      margin-right: 3px;
-      margin-bottom: 0px;
+      height: 100%;
 
       dd {
-        top: 32px;
-        position: absolute;
-        right: 0;
-        width: 355px;
+        // width: 355px;
         border: 1px solid #e3e3e3;
         background: #fff;
         z-index: 3;
@@ -410,7 +405,7 @@ watchEffect(() => {
       dt {
         position: absolute;
         z-index: 3;
-        width: 165px;
+        // width: 165px;
         height: 38px;
         border: 1px solid #e3e3e3;
         background-color: #fff;
@@ -465,10 +460,12 @@ watchEffect(() => {
     }
 
     .sld_search_part {
+      width: 480px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       height: 32px;
       background-color: #fff;
-      margin-top: 16px;
-      margin-right: 20px;
 
       input {
         height: 30px;
@@ -477,7 +474,9 @@ watchEffect(() => {
         background-color: #fff;
 
         &.text {
-          width: 202px;
+          flex: 1;
+          width: 100%;
+          overflow: hidden;
           line-height: 30px;
           padding-left: 10px;
         }

+ 0 - 1
xinkeaboard-web/components/NavTopBar.vue

@@ -336,7 +336,6 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
               padding: 5px 3px;
               left: 50%;
               transform: translateX(-50%);
-              top: 38px;
               background: #fff;
               box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
               z-index: 999;

+ 24 - 25
xinkeaboard-web/components/Store/HeaderCat.vue

@@ -6,7 +6,7 @@
         <a href="javascript:void(0)" class="sld_img_center fl" @click="go_home">
           <img :src="filtersStore.getSiteLogo" :onerror="defaultImg" alt />
         </a>
-        <span class="fl line"></span>
+        <!-- <span class="fl line"></span> -->
         <div class="sld_store_rate fl">
           <p class="name"><span>{{ storeData.info.storeName }} </span>  <i class="sld_sjx"></i></p>
           <div class="sld_store_info_more">
@@ -44,29 +44,31 @@
         </div>
       </div>
       <div class="search_wrap clearfix">
-        <form class="fl" action="javascript:void(0)" method="get">
+        <div class="search_wrap-content">
+          <form class="fl" action="javascript:void(0)" method="get">
+            <input
+              type="text"
+              v-model="keyword"
+              class="text"
+              :placeholder="L['请输入关键词']"
+              autocomplete="off"
+              style="color: rgb(153, 153, 153)"
+              ref="searchInput"
+              @focus="inputFocus"
+              @input="inputChange"
+              @blur="inputBlur"
+            />
+            <input type="submit" :value="L['搜索']" class="button" @click="search" />
+          </form>
           <input
-            type="text"
-            v-model="keyword"
-            class="text"
-            :placeholder="L['请输入关键词']"
-            autocomplete="off"
-            style="color: rgb(153, 153, 153)"
-            ref="searchInput"
-            @focus="inputFocus"
-            @input="inputChange"
-            @blur="inputBlur"
+            type="submit"
+            :value="L['搜本店']"
+            class="button fl"
+            @click="searchStore('keyword')"
+            style="background: #333"
           />
-          <input type="submit" :value="L['搜索']" class="button" @click="search" />
-        </form>
-
-        <input
-          type="submit"
-          :value="L['搜本店']"
-          class="button fl"
-          @click="searchStore('keyword')"
-          style="background: #333"
-        />
+        </div>
+        
 
 
       </div>
@@ -379,12 +381,9 @@ const inputBlur = () => {
 }
 
 .sld_store_follow {
-  position: relative;
-  float: left;
   margin-left: 15px;
   padding: 7px 9px;
   border-radius: 15px;
-  margin-top: 38px;
   color: #fff;
   background-color: $colorMain;
   display: flex;

+ 4 - 3
xinkeaboard-web/pages/member/enquiry/list.vue

@@ -45,12 +45,13 @@
           </el-table-column>
           <el-table-column prop="quantity" :label="L['采购数量']"  >
             <template #default="scope">
-              <template v-if="scope.row.itemType == 'GOODS'">
-                {{scope.row.quantity}}
+              {{scope.row.quantity}}
+              <!-- <template v-if="scope.row.itemType == 'GOODS'">
+                
               </template>
               <template v-if="scope.row.itemType != 'GOODS'">
                 -
-              </template>
+              </template> -->
             </template>
           </el-table-column>
           <el-table-column prop="createTime" :label="L['发送时间']" width="180">