fiexd 优化细节

assets/css/business/todo_list/index.scss

@@ -0,0 +1,59 @@
+.todo-list-pos-box{
+    padding: 100px 0;
+}
+
+.todo-list-title-box{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 80px;
+}
+
+.todo-list-title-box h4{
+    margin-top: 10px;
+}
+
+.todo-list-big-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.todo-list-box {
+    height: 120px;
+    width: 80%;
+    display: flex;
+    align-items: center;
+    margin: 0px 0px 0px 20px;
+    background-color: rgb(229, 229, 229);
+    border-radius: 40px;
+    margin-bottom: 25px;
+}
+
+.todo-list-check-box {
+    height: 40px;
+    width: 40px;
+    margin: 0px 0px 0px 30px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.todo-list-check-img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.todo-list-text-box {
+    margin: 0px 0px 0px 20px;
+}
+
+.todo-list-time {
+    margin: 5px 0px 0px;
+    font-size: 20px;
+}
+
+.todo-list-text {
+    font-size: 25px;
+}

assets/css/business/todo_list/media.scss

@@ -0,0 +1,36 @@
+//media.scss
+/*1440px*/
+/*大于*/
+@media screen and (min-width: 1440px) {
+    .container {
+        max-width: 1420px;
+    }
+}
+
+/*小于*/
+@media screen and (min-width: 1440px) {}
+
+/*1200px*/
+/*大于*/
+@media screen and (min-width: 1200px) {}
+
+/*小于*/
+@media screen and (max-width: 1200px) {}
+
+/*880px*/
+/*大于*/
+@media screen and (min-width: 880px) {}
+
+/*小于*/
+@media screen and (max-width: 880px) {
+
+}
+
+/*480px*/
+/*大于*/
+@media screen and (min-width: 480px) {}
+
+/*小于*/
+@media screen and (max-width: 480px) {
+
+}

assets/css/index/card.css

@@ -94,7 +94,7 @@
 }
 .content .card1 .hover-wrapper .btn {
   width: 90%;
-  margin-top: 1.5vw;
+  margin-top: 30px;
   border-radius: 50px;
   background-color: rgb(67, 119, 216);
   border: 0;
@@ -169,12 +169,12 @@
 }
 
 .love-story-btn-box .btn {
-  margin-top: 0vw;
+  margin-top: 30px;
   border-radius: 50px;
   background-color: rgb(67, 119, 216);
   padding: 5px 100px;
   border: 0;
-  font-size: 1vw;
+  font-size: 20px;
   cursor: pointer;
   color: #fff;
 }

assets/css/index/index.scss

@@ -31,25 +31,7 @@
     display: flex;
     justify-content: center;
 }
-// .cardiac-moment-big-box{
+
-//     display: flex;
-//     flex-wrap: wrap;
-//     align-items: center;
-// }
-// .cardiac-moment-big-text-box{
-//     width: 200px;
-// }
-// .cardiac-moment-big-img-box{
-//     width: 300px;
-//     height: 450px;
-//     overflow: hidden;
-//     margin-left: 200px;
-// }
-// .cardiac-moment-big-img-box img{
-//     width: 100%;
-//     height: 100%;
-//     object-fit: contain;
-// }
 .todo-list-big-box {
     display: flex;
     justify-content: center;
@@ -59,7 +41,7 @@
 
 .todo-list-box {
     height: 120px;
-    width: 50%;
+    width: 60%;
     display: flex;
     align-items: center;
     margin: 0px 0px 0px 20px;

assets/css/index/media.scss

@@ -1,44 +1,34 @@
 //media.scss
 /*1440px*/
 /*大于*/
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 1440px) {}
-}
 
 /*小于*/
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 1440px) {}
-}
 
 /*1200px*/
 /*大于*/
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1200px) {}
-
-}
 
 /*小于*/
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 1200px) {}
-
-}
 
 /*880px*/
 /*大于*/
-@media screen and (min-width: 880px) {
+@media screen and (min-width: 880px) {}
-
-}
 
 /*小于*/
-@media screen and (max-width: 880px) {
+@media screen and (max-width: 880px) {}
-
-}
 
 
 /*480px*/
 /*大于*/
-@media screen and (min-width: 480px) {
+@media screen and (min-width: 480px) {}
-
-}
 
 /*小于*/
 @media screen and (max-width: 480px) {
- 
+    .todo-list-box {
-}
+        width: 90% !important;
+    }
 
+}

components/Carousel/index.vue

@@ -67,7 +67,6 @@ const params = reactive({
 // })
 // 获取海报
 useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res => {
-  // console.log(JSON.parse(res.data.value),'asdasdasd');
   banner_list.value = JSON.parse(res.data.value).data
 })
 

components/Header/index.vue

@@ -75,8 +75,8 @@ let navList = [
   {
     name: '心愿单',
     children: [],
-    href: 'https://github.com/Abbh1/AerwenTool',
+    href: '/todo-list',
-    alias: 'GitHub'
+    alias: 'todo-list'
   },
   {
     name: '留言',

pages/index.vue

@@ -18,18 +18,19 @@
     <!-- 爱情故事展示 -->
     <div class="card-pos-box">
 
-      <div class="love-story-title-box">
+      <div class="love-story-title-box op0" data-animation="animate__animated animate__fadeInDown">
         <h2>爱情故事</h2>
         <h4>记录生活，分享喜悦，快乐相随</h4>
       </div>
 
-      <div class="content">
+      <div class="content" v-if="homeData.loveStoryList" >
-        <div class="card1" >
+        <!-- 列表渲染 -->
+        <div class="card1" v-for="(item) in homeData.loveStoryList" :key=item.love_story_id>
           <div class="show-wrapper">
             <div class="pic-wrapper">
-              <img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png" />
+              <img :src=item.love_story_cover />
             </div>
-            <h2 class="title">暑假初见</h2>
+            <h2 class="title">{{ item.love_story_title }}</h2>
             <div class="show-info">
               <div class="show-info-item">
                 <svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
@@ -44,7 +45,7 @@
                     d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
                     fill="#FFFFFF" p-id="1645"></path>
                 </svg>
-                2023/08/10
+                {{ item.love_story_date }}
               </div>
             </div>
           </div>
@@ -52,48 +53,57 @@
             <div class="hover-info">
               <div class="info-item">
                 <!-- 地点 -->
-                <span>容桂站</span>
+                <span>{{ item.love_story_place }}</span>
-                <span class="info-item-title">2023/08/10</span>
+                <span class="info-item-title">{{ item.love_story_date }}</span>
               </div>
             </div>
-            <button class="btn">查看</button>
+            <nuxt-link :to="getLink(item)" class="btn">
+              <div>查看</div>
+            </nuxt-link>
           </div>
           <div class="background"></div>
         </div>
       </div>
 
       <div class="love-story-btn-box">
-        <button class="btn">查看更多</button>
+        <nuxt-link to="/love-story/1" class="btn">
+          查看更多
+        </nuxt-link>
       </div>
 
     </div>
 
 
-    <!-- 心动瞬间 -->
+    <!-- 心愿清单 -->
     <div class="cardiac-moment-pos-box">
       <div class="cardiac-moment-img-box">
         <img src="/img/home/monment.png" alt="">
       </div>
 
-      <div class="love-story-title-box">
+      <div class="love-story-title-box op0" data-animation="animate__animated animate__fadeInDown">
         <h2>心愿清单</h2>
         <h4>听我许下与你有关的心愿</h4>
       </div>
 
-      <div class="todo-list-big-box">
+      <div class="todo-list-big-box" v-if="homeData.wishList">
-        <div class="todo-list-box" v-for="(item) in 3">
+        <div class="todo-list-box" v-for="(item) in homeData.wishList" :key="item.wish_list_id">
           <div class="todo-list-check-box">
-            <img alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
+            <img v-if="item.wish_list_status === 1" alt="" class="todo-list-check-img"
+              src="https://www.mitangguan.cn/img/mitangguan/imcomplete.png">
+            <img v-else alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
           </div>
           <div class="todo-list-text-box">
-            <div class="todo-list-text">一起去川西！</div>
+            <div class="todo-list-text">{{ item.wish_list_name }}</div>
-            <div class="todo-list-time">2023-02-07</div>
+            <div class="todo-list-time">{{ item.wish_list_create_time }}</div>
           </div>
+
         </div>
       </div>
 
       <div class="love-story-btn-box">
-        <button class="btn">查看更多</button>
+        <nuxt-link to="/todo-list" class="btn">
+          查看更多
+        </nuxt-link>
       </div>
 
     </div>
@@ -119,7 +129,6 @@ let ImgDetailRef = ref(null)
 
 
 /**预对接的数据**/
-let openImg1 = ref("/img/home/open/open1.png")
 
 
 /**js常量的定义**/
@@ -140,11 +149,24 @@ function handleImg(v) {
   imgIdx.value = v
 }
 
+const getLink = function (item) {
+  if (item.love_story_link) {
+    return item.love_story_link;
+  } else {
+    return "/love-story/details/" + item.love_story_id;
+  }
+}
+
 
 /**
  * 接口对接
  */
 
+let homeData = ref({})
+useFetch('/api/home/getHome').then(res => {
+  homeData.value = JSON.parse(res.data.value).data
+})
+
 // 获取Tdk
 let tdk = ref({})
 useFetch('/api/tdk/getTdk', { params: { tdk_type: 1 } }).then(res => {
@@ -167,5 +189,5 @@ defineExpose({
 </script>
 
 <style scoped src="~/assets/css/index/index.scss"></style>
+<style scoped src="~/assets/css/index/media.scss"></style>  
 <style scoped src="~/assets/css/index/card.css"></style>
-<style scoped src="~/assets/css/index/media.scss"></style>  

pages/love-story/[page].vue

@@ -1,6 +1,6 @@
 <template>
     <Head>
-        <Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
+        <Title>{{ tdk.tdk_title }}</Title>
         <Meta :content=tdk.tdk_keyword name="keywords" />
         <Meta :content=tdk.tdk_description name="description" />
     </Head>
@@ -134,7 +134,6 @@ useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
 useFetch('/api/loveStory/getLoveStoryList', { params: queryParams }).then(res => {
     total.value = JSON.parse(res.data.value).count || 0
     loveStoryList.value = JSON.parse(res.data.value).data || []
-    console.log(loveStoryList.value, '列表');
 })
 
 // // 添加流量访问

pages/love-story/details/[id].vue

@@ -1,4 +1,9 @@
 <template>
+    <Head>
+        <Title>{{ loveStoryInfo.love_story_title }}{{ tdk.tdk_title }}</Title>
+        <Meta :content=tdk.tdk_keyword name="keywords" />
+        <Meta :content=tdk.tdk_description name="description" />
+    </Head>
     <Header></Header>
 
     <div class="joint-details-pos-box">
@@ -67,14 +72,13 @@ let loveStoryInfo = ref(
         // love_story_music_name : "凄美地-郭顶.128.mp3",
         // love_story_content : "<p>1111<img src=\"/uploads/Img/20230824\\03cd04de8e390129fe731493333a68bc.png\" alt=\"\" data-href=\"\" style=\"\"/></p>"
     }
-) 
+)
 
 
 
 // 获取新闻详情
 useFetch('/api/loveStory/getLoveStoryInfo', { params: { love_story_id: route.params.id } }).then(res => {
     loveStoryInfo.value = JSON.parse(res.data.value).data
-    console.log(loveStoryInfo.value, 'asdasddasd');
     setTimeout(() => {
         [...document.querySelectorAll('.joint-details-content-box img')].map(item => {
             item.style.maxWidth = 100 + '%'
@@ -87,9 +91,9 @@ useFetch('/api/loveStory/getLoveStoryInfo', { params: { love_story_id: route.par
 })
 // 获取Tdk
 let tdk = ref({})
-// useFetch('/api/tdk/getTdk', { params: { tdk_type: 3 } }).then(res => {
+useFetch('/api/tdk/getTdk', { params: { tdk_type: 3 } }).then(res => {
-//     tdk.value = JSON.parse(res.data.value).data
+    tdk.value = JSON.parse(res.data.value).data
-// })
+})
 // 添加流量访问
 // useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
 

pages/music.vue

@@ -1,17 +0,0 @@
-<template>
-    <audio controls="controls" height="100" width="100">
-        <source src="~/assets/music/music-1.mp3" type="audio/mp3" />
-        <embed height="100" width="100" src="~/assets/music/music-1.mp3" />
-    </audio>
-
-</template>
-
-<script setup>
-
-
-
-</script>
-
-
- 
-<style scoped></style>

pages/test.vue

@@ -1,33 +0,0 @@
-<template>
-  <Head>
-    <!-- <Title>test</Title> -->
-    <Title>{{ tdk.tdk_title }}</Title>
-    <Meta name="keywords" :content=tdk.tdk_keyword />
-    <Meta name="description" :content=tdk.tdk_description  />
-  </Head>
-
-  <h1>{{ contactInfo }}</h1>
-  <h2>{{ tdk }}</h2>
-</template>
-
-<script setup>
-
-let contactInfo = ref({})
-
-const headers = useRequestHeaders(['cookie'])
-let tdk = ref({})
-
-onMounted(async () => {
-  // 带请求头
-  // let data = useFetch('/api/contactUs/getContactInfo',{headers})
-
-  // let contactInfoData = await useFetch('/api/contactUs/getContactInfo', { headers })
-
-  // contactInfo.value = JSON.parse(contactInfoData.data.value)
-
-})
-useFetch('/api/tdk/getTdk', { params: { tdk_type: "index" } }).then(res => {
-  tdk.value = JSON.parse(res.data.value).data
-})
-
-</script>

pages/todo-list.vue

@@ -1,65 +1,89 @@
 
 <template>
-    <div class="todo-list-big-box">
+    <Head>
-        <div class="todo-list-box" v-for="(item) in 3">
+        <Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
-            <div class="todo-list-check-box">
+        <Meta :content=tdk.tdk_keyword name="keywords" />
-                <img alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
+        <Meta :content=tdk.tdk_description name="description" />
-            </div>
+    </Head>
-            <div class="todo-list-text-box">
+    <Header></Header>
-                <div class="todo-list-text">一起去川西！</div>
+    <Poster :type=2></Poster>
-                <div class="todo-list-time">2023-02-07</div>
+
+
+    <div class="--box-- todo-list-pos-box">
+
+        <div class="todo-list-title-box">
+            <h2>心愿清单</h2>
+            <h4>听我许下与你有关的心愿</h4>
+        </div>
+
+        <div class="todo-list-big-box">
+            <div class="todo-list-box" v-for="(item) in wishListList" :key="item.wish_list_id">
+                <div class="todo-list-check-box">
+                    <img v-if="item.wish_list_status === 1" alt="" class="todo-list-check-img"
+                        src="https://www.mitangguan.cn/img/mitangguan/imcomplete.png">
+                    <img v-else alt="" class="todo-list-check-img"
+                        src="https://www.mitangguan.cn/img/mitangguan/complete.png">
+                </div>
+                <div class="todo-list-text-box">
+                    <div class="todo-list-text">{{ item.wish_list_name }}</div>
+                    <div class="todo-list-time">{{ item.wish_list_create_time }}</div>
+                </div>
+
             </div>
         </div>
+
     </div>
+
+
+
+    <Final></Final>
 </template>
             
-<script lang="ts" setup >
 
+<script  setup >
+
+/** 业务参数 */
+const wishListList = ref([
+    {
+        "wish_list_id": 2,
+        "wish_list_guid": "bd6483b4-8b7e-6b86-56da-abcd5da42c57",
+        "wish_list_name": "一起去一次海边海岛！",
+        "wish_list_author": "lwh",
+        "wish_list_status": 1,
+        "wish_list_create_time": "2023-08-24",
+        "wish_list_sort": 2
+    }
+])
+
+
+
+/** 接口对接 */
+
+// 获取Tdk
+let tdk = ref({})
+useFetch('/api/tdk/getTdk', { params: { tdk_type: 4 } }).then(res => {
+    tdk.value = JSON.parse(res.data.value).data
+})
+
+// 心愿单列表
+useFetch('/api/wishList/getWishListList').then(res => {
+    wishListList.value = JSON.parse(res.data.value).data || []
+})
+
+// // 添加流量访问
+// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
+
+
+// fontSizeReactive({
+//     880: 1,
+//     480: 3,
+// })
+onMounted(() => {
+    htmlAddAnimations()
+
+})
 </script>
 
-<style  scoped>
+<style scoped src="~/assets/css/business/todo_list/index.scss"></style>
-.todo-list-big-box {
+<style scoped src="~/assets/css/business/todo_list/media.scss"></style>
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
 
-.todo-list-box {
-    height: 120px;
-    width: 80%;
-    display: flex;
-    align-items: center;
-    margin: 0px 0px 0px 20px;
-    background-color: rgb(229, 229, 229);
-    border-radius: 40px;
-    margin-bottom: 25px;
-}
-
-.todo-list-check-box {
-    height: 40px;
-    width: 40px;
-    margin: 0px 0px 0px 30px;
-    border-radius: 50%;
-    overflow: hidden;
-}
-
-.todo-list-check-img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-}
-
-.todo-list-text-box {
-    margin: 0px 0px 0px 20px;
-}
-
-.todo-list-time {
-    margin: 5px 0px 0px;
-    font-size: 20px;
-}
-
-.todo-list-text {
-    font-size: 25px;
-}
-</style>

server/api/home/getHome.js

@@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
     const method = getMethod(event).toUpperCase()
     let body
     if (method !== 'GET') body = await readRawBody(event)
-    const res = await $fetch(baseURL + "/Home.Home/getHome", {
+    const res = await $fetch(baseURL + "/Home.Home/getHomeData", {
         method,
         baseURL: event.context.baseUrl,
         headers: event.context.headers,

server/api/wishList/getWishListList.js

@@ -0,0 +1,25 @@
+import {
+    readRawBody,
+    getQuery,
+    getMethod
+} from 'h3'
+
+/**
+ * 获取心愿单列表
+ */
+
+export default defineEventHandler(async (event) => {
+    // 基础url
+    const baseURL = process.env.NUXT_PROXY_WEB_API
+    const method = getMethod(event).toUpperCase()
+    let body
+    if (method !== 'GET') body = await readRawBody(event)
+    const res = await $fetch(baseURL + "/WishList.WishList/getWishListList", {
+        method,
+        baseURL: event.context.baseUrl,
+        headers: event.context.headers,
+        params: getQuery(event),
+        body
+    })
+    return res
+})