ui 适配

src/components/basic-tab/index.vue

@@ -1,8 +1,18 @@
 <template>
-  <div class='tab-bg flex' :style=' full ? `width:100%` : `width:`+ width +`px`'>
-    <div v-for='(item,index) in tabs' :key='item' class='flex flex-center bold'
-         :style='full ?  `width:`+ (100 / tabs.length)+`%` : `width:`+tabWidth+`px`'
-         :class='active === index ? "tab-active":"tab" ' @click='change(item,index)'>
+  <div
+    class="tab-bg flex"
+    :style="full ? `width:100%` : `width:` + width + `px`"
+  >
+    <div
+      v-for="(item, index) in tabs"
+      :key="item"
+      class="flex flex-center bold"
+      :style="
+        full ? `width:` + 100 / tabs.length + `%` : `width:` + tabWidth + `px`
+      "
+      :class="active === index ? 'tab-active' : 'tab'"
+      @click="change(item, index)"
+    >
       {{ item.name }}
     </div>
   </div>
@@ -43,9 +53,9 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .tab-bg {
-  background-color: #EDF0F3;
+  background-color: #edf0f3;
   padding: 2px 10px;
   color: #707070;
   border-radius: 40px;
@@ -62,7 +72,7 @@ export default {
 .tab-active {
   padding: 0 40px;
   margin: 5px 10px 5px 0;
-  background-color: #AB7630;
+  background-color: #ab7630;
   color: white;
   height: 30px;
   border-radius: 35px;

src/views/home/component/owner_serach.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-center padding white-bg">
-    <el-form v-model="form" class="lab mt-20 full-width" label-width="160px">
+    <el-form v-model="form" class="lab mt-20 full-width" label-width="145px">
       <div class="flex">
         <!-------left------->
-        <div class="flex flex-col mr-20">
+        <div class="flex flex-col mr-10">
           <el-form-item class="full-width" label="项目名称">
             <el-input
               v-model="form.projectName"
@@ -63,7 +63,7 @@
           </div>
         </div>
         <!-------right------->
-        <div class="flex flex-col ml-20">
+        <div class="flex flex-col ml-10">
           <div class="flex flex-center">
             <el-form-item class="full-width" label="省重点">
               <el-select

src/views/invest/components/amount.vue

@@ -78,7 +78,6 @@ export default {
         refreshBtn: false,
         columnBtn: false,
         border: true,
-        index: true,
         column: [
           {
             label: '部门/乡镇',

src/views/invest/components/complete.vue

@@ -3,26 +3,26 @@
     <span class="font-16 bold full-width text-left">项目投资完成情况总览</span>
     <div class="full-width flex-justify-end flex">
       <el-select
-          v-model="month"
-          class="m-2"
-          placeholder="请选择"
-          ref="month"
-          clearable
-          @change="changeMonth"
+        v-model="month"
+        class="m-2"
+        placeholder="请选择"
+        ref="month"
+        clearable
+        @change="changeMonth"
       >
         <el-option
-            v-for="item in selectOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+          v-for="item in selectOption"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
         />
       </el-select>
     </div>
     <avue-crud
-        :option="option"
-        :before-open="beforeOpen"
-        v-model="form"
-        :data="data"
+      :option="option"
+      :before-open="beforeOpen"
+      v-model="form"
+      :data="data"
     >
       <template #projectname="{ row }">
         <div :class="row.yearlyCompleteAmount === '0' ? 'red' : ''">
@@ -92,7 +92,6 @@ export default {
         refreshBtn: false,
         columnBtn: false,
         border: true,
-        index: true,
         column: [
           {
             label: '项目名称',
@@ -136,35 +135,35 @@ export default {
       switch (res.value) {
         case 1:
           for (let i = 1; i <= 3; i++) {
-            const item = {label: i + '月', value: i}
+            const item = { label: i + '月', value: i }
             this.selectOption.push(item)
           }
           this.quarter = 1
           break
         case 2:
           for (let i = 4; i <= 6; i++) {
-            const item = {label: i + '月', value: i}
+            const item = { label: i + '月', value: i }
             this.selectOption.push(item)
           }
           this.quarter = 2
           break
         case 3:
           for (let i = 7; i <= 9; i++) {
-            const item = {label: i + '月', value: i}
+            const item = { label: i + '月', value: i }
             this.selectOption.push(item)
           }
           this.quarter = 3
           break
         case 4:
           for (let i = 10; i <= 12; i++) {
-            const item = {label: i + '月', value: i}
+            const item = { label: i + '月', value: i }
             this.selectOption.push(item)
           }
           this.quarter = 4
           break
         default:
           for (let i = 1; i <= 12; i++) {
-            const item = {label: i + '月', value: i}
+            const item = { label: i + '月', value: i }
             this.selectOption.push(item)
             this.month = ''
             this.quarter = ''

src/views/invest/components/years.vue

@@ -8,8 +8,8 @@
         style="width: 99%"
       />
     </div>
-    <div class="flex flex-center full-width mt-10">
-      <div v-for="i in dash" class="flex-child-average" :key="i">
+    <el-row class="flex flex-center full-width mt-10 flex-wrap">
+      <el-col :lg="12" :xl="6" v-for="i in dash" :key="i">
         <div class="box" :style="`box-shadow: ` + i.box">
           <div class="flex flex-col bold font-16 padding-14">
             <div class="flex flex-justify-start flex-align-end">
@@ -58,8 +58,8 @@
             <wave :color="i.color" />
           </div>
         </div>
-      </div>
-    </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -259,6 +259,7 @@ export default {
 }
 
 .box {
+  min-width: 280px;
   border-radius: 8px;
   min-height: 115px;
   margin: 20px;