选中样式处理

selfServiceMachine/src/assets/styles/index.scss

@@ -322,7 +322,7 @@
       padding: 20px 24px;
       background-color: #fff;
       border-radius: 8px;
-      height: calc(100vh - 696px);
+      height: calc(100vh - 698px);
       overflow: hidden;
       overflow-y: scroll;
       .result{
@@ -465,9 +465,26 @@
       line-height: 40px;
       border-bottom: 1px solid #C6C6E2;
       span{
+        position: relative;
+        width: 97px;
         color: #000;
+        &::before{
+          position: absolute;
+          bottom: 6px;
+          left: 0;
+          content: "";
+          width: 16px;
+          height: 7px;
+          background-color: #5A86F4;
+          opacity: .4;
+        }
+      }
+      .book-num{
+        width: 200px;
       }
       .place-detail{
+        flex: 1;
+        text-align: right;
         padding-right: 56px;
         color: #000;
         background: url('~@/assets/images/img10.png') no-repeat right center;

selfServiceMachine/src/views/bookRecommend.vue

@@ -12,33 +12,16 @@
 						<div class="filter-item">
 							<div class="filter-item-title">出版社</div>
 							<ul class="publish-list">
-								<li class="active">
-									<p>人民文学出版社</p>
-									<span>100册</span>
-								</li>
-								<li>
-									<p>商务印书馆</p>
-									<span>96册</span>
-								</li>
-								<li>
-									<p>人民出版社</p>
-									<span>80册</span>
-								</li>
-								<li>
-									<p>上海译文出版社</p>
-									<span>43册</span>
+								<li v-for="(item,index) in publish" :key="index" @click="selectPublic(index)" :class="{ 'active': selectedIndex === index }">
+									<p>{{ item.name }}</p>
+									<span>{{ item.num }}</span>
 								</li>
 							</ul>
 						</div>
 						<div class="filter-item">
 							<div class="filter-item-title">出版时间</div>
 							<div class="publish-time-list">
-								<span class="active">2023</span>
-								<span>2022</span>
-								<span>2021</span>
-								<span>2020</span>
-								<span>2019</span>
-								<span>2018</span>
+								<span v-for="(item,index) in publishDate" @click="selectDate(index)" :class="{ 'active': selectedDateIndex === index }">{{ item }}</span>
 							</div>
 						</div>
 					</div>
@@ -256,10 +239,38 @@ export default {
 					label: '出版时间',
 				},
 			],
+      publish:[
+        {
+          num: '100册',
+          name: '人民文学出版社',
+        },
+        {
+          num: '96册',
+          name: '商务印书馆',
+        },
+        {
+          num: '80册',
+          name: '人民出版社',
+        },
+        {
+          num: '43册',
+          name: '上海译文出版社',
+        }
+      ],
+      publishDate:[2023,2022,2021,2020,2019,2018],
+      selectedIndex: null,
+      selectedDateIndex: null
 		}
 	},
 	created() {},
-	methods: {},
+	methods: {
+    selectPublic(index){
+      this.selectedIndex = index
+    },
+    selectDate(index){
+      this.selectedDateIndex = index
+    }
+  }
 }
 </script>