修改侧边选择样式

src/assets/styles/index.scss

@@ -124,6 +124,13 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 10px;
+   .current-title{
+      font-size: 18px;
+     color: rgba(28,30,32,0.85);
+     font-family: Noto Sans SC, Noto Sans SC;
+     font-weight: 500;
+     margin: 20px 0;
+   }
 }
 
 .components-container {

src/components/baseSelection/index.vue

@@ -40,9 +40,9 @@ onMounted(()=>{
   <div class="base-box" :style="{height:maxHeight+'px'}"  v-loading="loading">
     <title-divider title="育种基地/资源圃"></title-divider>
     <div class="base-list">
-      <div class="base-item" v-for="item in baseList" @click="clickBase(item)">
+      <div class="base-item" :class="{'base-active':currentBase.id === item.id}" v-for="item in baseList" @click="clickBase(item)">
         <i-local-two theme="filled" size="22" :fill="currentBase.id !== item.id ? '#6c6c6c' : theme"/>
-        <div class="base-name" :class="{'base-active':currentBase.id === item.id}">{{item.baseName}}</div>
+        <div class="base-name">{{item.baseName}}</div>
       </div>
     </div>
   </div>
@@ -56,9 +56,15 @@ onMounted(()=>{
 }
 .base-list{
   .base-item{
-    margin: 10px 20px;
+    text-align: center;
     //鼠标悬浮变成点击
     cursor: pointer;
+    padding: 10px 20px;
+
+    &:hover {
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+    }
     display: flex;
     .base-name{
       margin-left: 10px;
@@ -66,6 +72,8 @@ onMounted(()=>{
   }
 }
 .base-active{
-  color: v-bind(theme);
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  border-right: 3px solid var(--el-color-primary);
 }
 </style>

src/components/cropSelection/index.vue

@@ -13,6 +13,8 @@ onMounted(()=>{
         clickCrop(item)
       }
     })
+  }else{
+    clickCrop(cropList.value[0])
   }
 })
 const currentCrop = defineModel({type:Object,default:()=>({})})
@@ -31,9 +33,9 @@ const clickCrop = (item) => {
   <div class="Crop-box" :style="{height:maxHeight+'px'}">
     <title-divider title="作物列表"></title-divider>
     <div class="Crop-list">
-      <div class="Crop-item" v-for="item in cropList" @click="clickCrop(item)">
+      <div class="Crop-item" :class="{'Crop-active':currentCrop.cropId === item.cropId}" v-for="item in cropList" @click="clickCrop(item)">
         <i-local-two theme="filled" size="22" :fill="currentCrop.cropId !== item.cropId ? '#6c6c6c' : theme"/>
-        <div class="Crop-name" :class="{'Crop-active':currentCrop.cropId === item.cropId}">{{item.cropName}}</div>
+        <div class="Crop-name" >{{item.cropName}}</div>
       </div>
     </div>
   </div>
@@ -47,9 +49,15 @@ const clickCrop = (item) => {
 }
 .Crop-list{
   .Crop-item{
-    margin: 10px 20px;
+    text-align: center;
     //鼠标悬浮变成点击
     cursor: pointer;
+    padding: 10px 20px;
+
+    &:hover {
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+    }
     display: flex;
     .Crop-name{
       margin-left: 10px;
@@ -57,6 +65,8 @@ const clickCrop = (item) => {
   }
 }
 .Crop-active{
-  color: v-bind(theme);
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  border-right: 3px solid var(--el-color-primary);
 }
 </style>