From ff640115d9b6564ca5ff22385dd702796a253c46 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Sun, 26 Nov 2023 19:32:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=A0=B7=E5=BC=8F=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/styles/index.scss              | 19 ++++++-
 .../src/views/bookRecommend.vue               | 55 +++++++++++--------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/selfServiceMachine/src/assets/styles/index.scss b/selfServiceMachine/src/assets/styles/index.scss
index bf7f694..97df194 100644
--- a/selfServiceMachine/src/assets/styles/index.scss
+++ b/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;
diff --git a/selfServiceMachine/src/views/bookRecommend.vue b/selfServiceMachine/src/views/bookRecommend.vue
index ac646a8..4515489 100644
--- a/selfServiceMachine/src/views/bookRecommend.vue
+++ b/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>