api & ui update

client/src/components/index/FilmList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="c_content" v-if="d.list" >
+  <div class="c_content" v-if="d.list">
     <template v-if="d.list.length > 0">
-      <div class="item" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
-        <div v-if="item.id != -99">
+      <div class="item film-card" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
+        <div v-if="item.id != -99 && global.isMobile" class="hidden-md-and-up">
           <a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
             <div class="tag_group">
               <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
@@ -15,6 +15,30 @@
           <a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
           <span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
         </div>
+
+        <div v-if="!global.isMobile"  class="film-card-inner">
+          <div class="film-card-front">
+            <a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
+              <div class="tag_group">
+                <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
+                <span class="cus_tag ">{{ item.cName }}</span>
+                <span class="cus_tag ">{{ item.area.split(',')[0] }}</span>
+              </div>
+              <span class="cus_remark hidden-md-and-up">{{ item.remarks }}</span>
+              <img :src="item.picture" :alt="item.name?.split('[')[0]" @error="handleImg">
+            </a>
+          </div>
+          <div class="film-card-back">
+            <p class="card-title" >{{item.name}}</p>
+            <p v-show="item.blurb != ''" class="card-blurb">{{ item.blurb }}</p>
+            <p v-show="item.blurb == ''" class="card-blurb"> 暂无简介 </p>
+            <el-button class="card-detail" :icon="Discount" color="#626aef" plain round onclick="goDetail(item.id)" >详情</el-button>
+          </div>
+        </div>
+        <a v-if="!global.isMobile" :href="`/filmDetail?link=${item.id}`" class="content_text_tag hidden-sm-and-down">{{ item.name.split("[")[0] }}</a>
+
+
+
       </div>
     </template>
     <el-empty v-if="d.list.length <= 0" style="padding: 10px 0;margin: 0 auto" description="暂无相关数据"/>
@@ -22,7 +46,8 @@
 </template>
 
 <script setup lang="ts">
-import {defineProps, onMounted, reactive, watch, watchEffect} from 'vue'
+import {defineProps, inject, reactive, watchEffect} from 'vue'
+import {Discount} from "@element-plus/icons-vue";
 
 const props = defineProps({
   list: Array,
@@ -34,11 +59,16 @@ const d = reactive({
   width: 0,
 })
 
+const global = inject('global')
 // 图片加载失败事件
 const handleImg = (e: Event) => {
   e.target.style.display = "none"
 }
 
+const goDetail = (id:number) =>{
+  location.href = `/filmDetail?link=${id}`
+}
+
 // 监听父组件传递的参数的变化
 watchEffect(() => {
   // 首先获取当前设备类型
@@ -158,18 +188,17 @@ watchEffect(() => {
     justify-content: space-between;
   }
 
-  .c_content .item {
+  .item {
     margin-bottom: 20px;
     box-sizing: border-box;
   }
 
-  .item .link_content {
-    border-radius: 5px;
-    padding-top: 125%;
+  .link_content {
+    /*    padding-top: 125%;*/
     background-size: cover;
     width: 100%;
     display: flex;
-    position: relative;
+    /*    position: relative;*/
     margin-bottom: 5px;
   }
 
@@ -216,7 +245,6 @@ watchEffect(() => {
     padding: 2px 10px 2px 2px !important;
     text-align: left;
     text-overflow: ellipsis;
-
     white-space: nowrap;
     overflow: hidden;
   }
@@ -230,4 +258,75 @@ watchEffect(() => {
     text-align: left;
   }
 }
+</style>
+
+
+<style>
+.film-card {
+
+  background-color: transparent;
+  width: 100%;
+  perspective: 1000px;
+  font-family: sans-serif;
+}
+
+
+.film-card-inner {
+
+  padding-top: 125%;
+  position: relative;
+  width: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.film-card:hover .film-card-inner {
+  transform: rotateY(180deg);
+}
+
+.film-card-front, .film-card-back {
+  border-radius: 5px;
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: linear-gradient(#fff2, transparent);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
+}
+.film-card-back {
+  transform: rotateY(180deg);
+
+}
+
+
+
+.card-title, .card-actor {
+  margin: 0 auto;
+  font-size: 14px ;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card-blurb {
+  margin-bottom: 30px;
+  display: -webkit-box;
+  -webkit-line-clamp: 5; /* 限制显示的行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 12px;
+}
+
+.card-detail {
+  position: absolute;
+  width: 60%;
+  left: 20%;
+  bottom: 5px;
+}
 </style>

client/src/views/index/Home.vue

@@ -34,8 +34,8 @@
           </el-col>
           <el-col :span="12">
             <ul class="nav_ul">
-              <template v-for="c in item.nav.children">
-                <li class="nav_category hidden-md-and-down" v-if="c.show"><a
+              <template v-for="(c,i) in item.nav.children">
+                <li class="nav_category hidden-md-and-down" v-if="c.show && i < 6"><a
                     :href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
               </template>
               <li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
@@ -80,37 +80,7 @@ const data = reactive({
 })
 const router = useRouter()
 
-// 轮播数据拟态
-let banners = [
-  {
-    name: '樱花庄的宠物女孩',
-    year: 2012,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/Wt1QDhabdEI7HcL.jpg'
-  },
-  {
-    name: '从零开始的异世界生活',
-    year: 2016,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-29/82e3aec3f43103fa1b7e5a0e7f7c3806.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/UkpdhIRO12fsy6C.jpg'
-  },
-  {
-    name: '五等分的新娘',
-    year: 2020,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-38/dfff403cfd9a5b7d6eed8b4f1b3dedb1.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/wXJr59Zuv4tcKNp.jpg'
-  },
-  {
-    name: '我的青春恋爱物语果然有问题',
-    year: 2018,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-37/e5c9ec121c2cba230243c333447e818a.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/oMAGzSliK2YbhRu.jpg'
-  },
-]
+
 
 // pc 背景图同步响应
 const carousel = (index: number) => {