细节修改

src/components/SeclectBox.vue

@@ -20,49 +20,61 @@ import UniversalButton from './UniversalButton.vue'
 
 const selectArray = ['显示行政区划', '2413', '660', '主要交通路网', '36.6边界', '主要设施用地']
 </script>
-<style scoped>
 .checkBox {
-  border: 0.1rem solid #456655;
-  border-radius: 0.8rem;
-  padding-top: 2.6rem;
-  color: rgb(202, 200, 200);
-  width: 25.9rem;
-  height: 37.7rem;
-  background: #142222;
-  right: 130rem;
-  top: 85rem;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  #box {
-    font-size: 2.4rem;
-    width: 100%;
-    height: 2.4rem;
-  }
-  #box :last-child {
-    margin-bottom: 3.38rem;
-  }
-
-  input[type='checkbox'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin-right: 1rem;
-    margin-left: 3.6rem;
-    width: 2.15rem;
-    height: 2.15rem;
-    background-color: transparent;
-    border: #58896cff 0.1rem solid;
-  }
-  input[type='checkbox']:checked:before {
+    border: 0.1rem solid #456655;
+    border-radius: 0.8rem;
+    padding-top: 2.6rem;
+    color: rgb(202, 200, 200);
+    width: 25.9rem;
+    height: 37.7rem;
+    background: #142222;
+    right: 130rem;
+    top: 85rem;
+    position: absolute;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
-    content: '\2713';
-    color: white;
-    font-size: 1.4rem;
-  }
+    justify-content: space-between;
+
+    #box {
+        line-height: 2.4rem;
+
+        span {
+            height: 2.4rem;
+            text-align: center;
+            line-height: 2.4rem;
+        }
+
+        font-size:2.4rem;
+        display: flex;
+        width: 100%;
+        height: 2.4rem;
+    }
+
+    #box :last-child {
+        margin-bottom: 3.38rem;
+    }
+
+    input[type="checkbox"] {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin-right: 1rem;
+        margin-left: 3.6rem;
+        width: 2.4rem;
+        height: 2.4rem;
+        background-color: transparent;
+        border: #58896CFF 0.1rem solid;
+    }
+
+    input[type="checkbox"]:checked:before {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        content: '\2713';
+        color: white;
+        font-size: 1.4rem;
+    }
+
 }
-</style>
+</style>

src/components/UnAeraButton.vue

@@ -87,6 +87,7 @@ let x = defineProps({
 </script>
 <style scoped>
 button {
+
   border: none;
   background-position: center;
   background-repeat: no-repeat;
@@ -98,7 +99,7 @@ button {
   border: none;
   cursor: pointer;
   text-align: center;
-
+  line-height:7.7rem;
   span {
     display: block;
   }
@@ -110,8 +111,5 @@ button {
   }
 }
 
-img {
-  width: 100%;
-  height: 100%;
-}
+
 </style>

src/components/UniversalButton.vue

@@ -1,31 +1,28 @@
 <template>
-  <button
-    :style="{
-      justifyContent: justifyContent,
-      fontSize: Font_size,
-      width,
-      height,
-      background: bgColor,
-      borderRadius: border_radius,
-      border: Border,
-      boxShadow,
-      color,
-      margin
-    }"
-  >
-    <span
-      v-if="image.src"
-      :style="{
-        width: image.width,
-        height: image.height
-      }"
-    >
-      <img v-if="image.src" :src="image.src" alt="" />
-    </span>
-    <span :style="{ margin }">
-      {{ text }}
-    </span>
-  </button>
+ <button :style="{
+        lineHeight:height,
+        justifyContent: justifyContent,
+        fontSize: Font_size,
+        width,
+        height,
+        background: bgColor,
+        borderRadius: border_radius,
+        border: Border,
+        boxShadow,
+        color,
+        margin,
+    }">
+        <span v-if="image.src" :style="{
+            width: image.width,
+            height: image.height,
+
+        }">
+            <img v-if="image.src" :src="image.src" alt="">
+        </span>
+        <span :style="{ margin }">
+            {{ text }}
+        </span>
+    </button>
 </template>
 <script setup lang="ts">
 let x = defineProps({

src/components/cartBoxTowContent.vue

@@ -2,23 +2,26 @@
   <div class="box">
     <div class="img">
       <div>
-        <img :src="image.src" alt="" />
+        <img :src="image.src" alt="">
       </div>
       <div>
-        <img src="../assets/images/Slice 6.png" alt="" />
+        <img src="../assets/images/Slice 6.png" alt="">
       </div>
     </div>
     <div class="text">
       <p>{{ text }}</p>
       <div id="count">
-        <span>{{ Math.floor(count / 10) }}</span>
-        <span>{{ count % 10 }}</span>
-        <div>个</div>
+        <footer>
+          <div class="bg"><span>{{ Math.floor(count / 10) }}</span></div>
+        </footer>
+        <footer>
+          <div class="bg"><span>{{ count % 10 }}</span></div>
+        </footer>
+        <h6>个</h6>
       </div>
     </div>
   </div>
 </template>
-
 <script setup lang="ts">
 defineProps({
   text: {
@@ -35,8 +38,9 @@ defineProps({
   count: {
     type: Number,
     default: 0
-  }
+  },
 })
+
 </script>
 <style scoped>
 .box {
@@ -69,13 +73,16 @@ defineProps({
       width: 100%;
       height: 100%;
     }
+
+
   }
 
   div:nth-child(1) {
     transform: translateY(7.1rem);
     width: 5.4rem;
     height: 6.1rem;
   }
+
   div:nth-child(2) {
     /* transform: translateY(0); */
     width: 12.6rem;
@@ -108,7 +115,7 @@ defineProps({
     height: 100%;
 
     span {
-      background-image: linear-gradient(180deg, #f7ff8d 0%, #99cfb5 100%);
+      background: linear-gradient(180deg, #f7ff8d 0%, #99cfb5 100%);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -122,12 +129,23 @@ defineProps({
       display: block;
     }
 
-    div {
+    h6 {
       align-self: flex-end;
-      color: #ffffff;
+      color: #FFFFFF;
       font-size: 1rem;
-      margin-right: 1%;
+      margin-left: 1rem;
     }
   }
 }
+
+footer{
+  padding:0.2rem;
+background: linear-gradient(180deg, #f7ff8d 0%, #99cfb5 100%);
+border-radius: 5px;
+}
+.bg{
+border-radius: 5px;
+background-color: #142222;
+
+}
 </style>

src/components/ecologyTitle.vue

@@ -2,7 +2,7 @@
 const props = defineProps({
   data: {
     type: Object,
-    default: () => {}
+    default: () => { }
   },
   width: {
     type: String,
@@ -26,7 +26,9 @@ const props = defineProps({
       </div>
 
       <div class="main">
-        <div class="title1" v-for="iten in item?.space" :key="iten.id">{{ iten.title }}</div>
+        <div class="title2" v-for="iten in item?.space" :key="iten.id">
+           <span class="title1">{{ iten.title }}</span> 
+        </div>
       </div>
     </div>
   </div>
@@ -37,10 +39,11 @@ const props = defineProps({
   width: 100%;
   height: 100%;
   /* background-color: antiquewhite; */
-  font-family: 'SourceHanSansCN';
+  font-family: "SourceHanSansCN";
   padding: 1.999rem;
   font-size: 1.6rem;
   color: #fff;
+
   .container {
     width: 100%;
     height: 50%;
@@ -49,20 +52,24 @@ const props = defineProps({
     justify-content: space-around;
     align-items: start;
   }
+
 }
+
 .titleBox {
   display: flex;
   width: 100%;
   height: 10%;
   /* justify-content: center; */
   align-items: center;
+
   .icon {
     width: 0.6rem;
     height: 0.6rem;
     background-color: rgb(244, 186, 78);
     border-radius: 50%;
     margin-right: 0.9rem;
   }
+
   .title {
     width: 14.799rem;
     height: 1.8rem;
@@ -73,23 +80,34 @@ const props = defineProps({
     padding-left: 1rem;
   }
 }
+
 .main {
+  margin-left: 1rem ;
   width: 80%;
   height: 20%;
   display: flex;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
-  .title1 {
-    border: 1px transparent solid;
+   .title2 {
+    padding: 0.3rem;
     width: 9rem;
     height: 3.6rem;
-    border-radius: 1.75rem;
+    border-radius: 17.5px;
+    background: linear-gradient(to right, #b8b7b7 0%, transparent 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .title1 {
+    width: 9rem;
+    height: 3.6rem;
+    border-radius: 17.5px;
     opacity: 1;
     background: linear-gradient(270deg, #73737300 0%, #366543 100%);
     display: flex;
-    justify-content: center;
+     justify-content: center;
     align-items: center;
-    /* border-image:linear-gradient(to right #94AEA3 0%, transparent 100%) 1;  */
   }
 }
+}
 </style>
+

src/style.css

@@ -15,7 +15,7 @@
   --border-default: rgba(255, 255, 255, 0.3);
   --border-light: rgba(255, 255, 255, 0.1);
   --border-active: rgba(255, 255, 255, 0.3);
-  --border-radius: 8px;
+  --border-radius:0.8rem;
 
   /* 图表颜色 */
   --chart-green-normal: #275b38;