修改

src/views/thirteen/index.vue

@@ -7,7 +7,20 @@
             <el-row class="left_1" :gutter="20">
               <el-col :span="4" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
                 <el-row>
-                  <el-image class="image" :src="getfile(item.file)" fit="fill" />
+                  <div class="container group">
+                    <a class="book-container">
+                      <div class="book">
+                        <div class="book-cover">
+                          <!-- 书的正面图 -->
+                          <img :src="getfile(item.file)" alt="" />
+                        </div>
+                        <div class="book-spine" :style="{ background: `url(${getfile(item.file)}) -64px 0 no-repeat` }">
+                          <h1>{{ item.name || '暂无' }}</h1>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div style="text-align: center; clear: both"><br /></div>
                   <el-col :span="24" class="other">
                     <el-col :span="24" class="title textOne">{{ item.name || '暂无' }}</el-col>
                     <el-col :span="24" class="other_2">{{ item.brief || '暂无' }}</el-col>
@@ -16,6 +29,7 @@
               </el-col>
             </el-row>
           </el-col>
+
           <el-row>
             <el-col :span="24" class="page">
               <el-pagination background layout="total, prev, pager, next" :page-sizes="[10, 20, 50, 100, 200]" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange"> </el-pagination>
@@ -28,6 +42,8 @@
 </template>
 
 <script setup>
+// // 图片引入
+// import oneUrl from '/images/one.jpeg'
 // 接口
 import { NotesStore } from '@/store/api/platform/notes'
 const store = NotesStore()
@@ -81,7 +97,8 @@ const getfile = (item) => {
   .two {
     margin: 10px 0;
     .two_2 {
-      margin: 10px 0 0 0;
+      margin: 2cap 0 0 0;
+
       .left {
         .left_1 {
           display: flex;
@@ -89,9 +106,176 @@ const getfile = (item) => {
           .list {
             margin: 0 0 12px 0;
 
-            .image {
+            .group:after {
+              content: '.';
+              display: block;
+              height: 0;
+              clear: both;
+              visibility: hidden;
+            }
+
+            * html .group {
+              height: 1%;
+            }
+
+            *:first-child + html .group {
+              min-height: 1px;
+            }
+
+            body {
+              line-height: 1.9em;
+              color: #fff;
+              background-color: #0b3065;
+              background-size: cover;
+              font-family: arial, sans-serif;
+            }
+
+            .container {
+              // max-width: 60em;
+              // margin: 0 auto;
+              // padding: 0 2em;
+            }
+
+            .text.container {
+              max-width: 38em;
+              text-align: center;
+              margin: 50px auto 100px;
+              text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
+            }
+
+            a {
+              color: #da9803;
+              text-decoration: none;
+            }
+
+            a:hover {
+              text-decoration: underline;
+            }
+
+            h1.main-title {
+              font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+              color: #fff;
+              font-weight: normal;
+              margin: 1.25em;
+              text-align: center;
+              font-size: 2.75em;
+              letter-spacing: -1px;
+            }
+
+            p {
+              margin-bottom: 1em;
+              font-size: 1.25em;
+            }
+
+            hr {
+              margin: 2em 0;
+            }
+
+            .book-container {
+              // width: 220px;
+              // width: 375px;
+              margin: 0 auto;
+              display: block;
+              -webkit-perspective: 1200px;
+              -moz-perspective: 1200px;
+              perspective: 1200px;
+            }
+
+            .book {
+              z-index: 5;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+              -webkit-transition: 0.75s;
+              -moz-transition: 0.75s;
+              transition: 0.75s;
+              -webkit-transform-style: preserve-3d;
+              -moz-transform-style: preserve-3d;
+              transform-style: preserve-3d;
+              -webkit-transform-origin: 125px 0;
+              -moz-transform-origin: 125px 0;
+              transform-origin: 125px 0;
+            }
+
+            .book:after {
+              content: '';
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 3px;
+              width: 7px;
+              /* 翻页转角处的图片 */
+              background: url(/images/thr.png) repeat-y;
+              z-index: 20;
+              -webkit-transform: translateZ(1px);
+            }
+
+            .book:hover {
+              -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
+              -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
+              transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
+            }
+
+            .book-cover {
+              position: relative;
+              z-index: 10;
+            }
+
+            .book-cover img {
+              vertical-align: bottom;
+              max-width: 100%;
+              width: 220px;
+              height: 240px;
+            }
+
+            .book-spine {
+              position: absolute;
+              color: #fff;
+              position: absolute;
+              bottom: 0;
+              top: 0;
+              width: 50px;
+              z-index: 5;
+              overflow: hidden;
+              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+              /* 书的侧面图片 */
+              // background: url(/images/two.jpeg) -64px 0 no-repeat;
+              background-size: auto 100%;
+              -webkit-transform: rotateY(-90deg) translateX(-49px);
+              -moz-transform: rotateY(-90deg) translateX(-49px);
+              transform: rotateY(-90deg) translateX(-49px);
+              -webkit-transform-origin: 0 0;
+              -moz-transform-origin: 0 0;
+              transform-origin: 0 0;
+            }
+
+            .book-spine h1 {
+              display: block;
+              width: 325px;
+              text-align: left;
+              color: #fff;
+              position: absolute;
+              top: 0;
+              left: 39px;
+              text-indent: 43px;
+              text-transform: uppercase;
+              font-family: 'league_gothic_condensedRg', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+              font-size: 2em;
+              opacity: 0.75;
+              font-weight: normal;
+              -webkit-font-smoothing: antialiased;
+              -webkit-transform: rotateZ(90deg);
+              -moz-transform: rotateZ(90deg);
+              transform: rotateZ(90deg);
+              -webkit-transform-origin: 0 0;
+              -moz-transform-origin: 0 0;
+              transform-origin: 0 0;
+            }
+
+            .book-spine:before {
+              display: block;
+              content: '';
               width: 100%;
-              height: 220px;
+              height: 100%;
+              background: rgba(0, 0, 0, 0.3);
             }
             .other {
               .title {
@@ -120,99 +304,7 @@ const getfile = (item) => {
           }
         }
       }
-      .right {
-        .right_1 {
-          position: relative;
-          .image {
-            width: 100%;
-            height: 220px;
-          }
-          .text {
-            position: absolute;
-            left: 0;
-            bottom: 5px;
-            width: 100%;
-            padding: 0 8px;
-            background-color: rgba(0, 0, 0, 0.6);
-            background-image: none;
-            background-repeat: repeat;
-            background-position: 0 0;
-            background: -moz-linear-gradient(top, none, none);
-            background: -o-linear-gradient(top, none, none);
-            background: linear-gradient(top, none, none);
-            background: -webkit-gradient(linear, left top, left bottom, from(none), to(none));
-            box-sizing: border-box;
-            .title {
-              margin: 0;
-              padding: 0;
-              font-size: $global-font-size-18;
-              color: #fff;
-              text-align: center;
-              font-weight: normal;
-              font-style: normal;
-              text-decoration: none;
-              font-family: Tahoma;
-              line-height: 34px;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              -webkit-text-overflow: ellipsis;
-              -moz-text-overflow: ellipsis;
-              overflow: hidden;
-            }
-          }
-        }
-        .right_2 {
-          .right_2_1 {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            background: linear-gradient(90deg, #d7e8ff, #fff);
-            width: 300px;
-            height: 64px;
-            padding-left: 21px;
-            box-sizing: border-box;
-            margin-bottom: 7px;
-            .left {
-              font-size: $global-font-size-26;
-              font-family:
-                PingFangSC-Medium,
-                PingFang SC;
-              font-weight: 500;
-              color: #111;
-              line-height: 24px;
-            }
-            .right {
-              text-align: right;
-              font-size: $global-font-size-18;
-              font-family:
-                PingFangSC-Regular,
-                PingFang SC;
-              font-weight: 400;
-              color: #666;
-              cursor: pointer;
-            }
-          }
-          .content {
-            margin: 10px 0 0 0;
-            .name {
-              max-height: 48px;
-              font-size: $global-font-size-18;
-              font-family:
-                PingFangSC-Medium,
-                PingFang SC;
-              font-weight: 500;
-              color: #111;
-              line-height: 24px;
-              display: block;
-              cursor: pointer;
-            }
-            .name:hover {
-              color: #2374ff;
-              cursor: pointer;
-            }
-          }
-        }
-      }
+
       .page {
         display: flex;
         flex-direction: row-reverse;