From 97c1367453d93a267e702d94489328481585f1de Mon Sep 17 00:00:00 2001
From: fuxiaochun <f2e.xiaochun@gmail.com>
Date: Tue, 22 Aug 2023 14:41:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=97=E8=A1=A8=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ArticleDetail/index.vue        | 28 ++++-----
 src/layouts/Footer.vue                        | 63 ++++++++++---------
 .../business/components/CategoryCardList.vue  | 30 ++++-----
 3 files changed, 62 insertions(+), 59 deletions(-)

diff --git a/src/components/ArticleDetail/index.vue b/src/components/ArticleDetail/index.vue
index 305ba05..0826fbb 100644
--- a/src/components/ArticleDetail/index.vue
+++ b/src/components/ArticleDetail/index.vue
@@ -27,8 +27,7 @@
                             <img :src="item.cover" :alt="item.title">
                         </div>
                         <div class="rTitle">
-                            <h2>{{ item.title }}</h2>
-                            <span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
+                            <h2>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]{{ item.title }}</h2>
                         </div>
                         <div class="desc">{{ item.description }}</div>
                     </li>
@@ -230,7 +229,7 @@ const goDetail = (id) => {
 
                 li{
                     width: 100%;
-                    height: 428px;
+                    min-height: 428px;
                     background: #D6D6DD;
                     border-radius: 3px;
                     border: 5px solid #D6D6DD;
@@ -252,30 +251,29 @@ const goDetail = (id) => {
                         }
                     }
                     .rTitle{
-                        height: 80px;
                         width: 100%;
                         padding: 20px 10px;
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
                         h2{
-                            height: 40px;
                             font-weight: bold;
                             font-size: 28px;
                             line-height: 40px;
-                            margin-right: 10px;
+                            // margin-right: 10px;
                             flex: 1;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
                             text-align: left;
+                            span{
+                                font-weight: normal;
+                                padding-right: 5px;
+                            }
                         }
-                        span{
-                            height: 40px;
-                            line-height: 40px;
-                            display: inline-block;
-                            font-size: 22px;
-                        }
+                        // span{
+                        //     height: 40px;
+                        //     line-height: 40px;
+                        //     display: inline-block;
+                        //     font-size: 22px;
+                        // }
                     }
                     .desc{
                         margin: 10px;
diff --git a/src/layouts/Footer.vue b/src/layouts/Footer.vue
index 23d1ba6..626cfc5 100644
--- a/src/layouts/Footer.vue
+++ b/src/layouts/Footer.vue
@@ -1,27 +1,31 @@
 <template>
     <div class="footer">
-        <div class="logo">
-            <img :src="website.info.web_footer_logo" :alt="website.info.web_title">
-        </div>
         <div class="info">
             <p>{{ website.info.web_footer_description }}</p>
         </div>
-        <div class="qrcode"><img :src="website.info.contact_qrcode" :alt="website.info.web_title"></div>
+        <div class="imgs">
+            <div class="img">
+                <img :src="website.info.web_footer_logo" :alt="website.info.web_title">
+            </div>
+            <div class="img">
+                <img :src="website.info.contact_qrcode" :alt="website.info.web_title">
+            </div>
+        </div>
         <div class="contactInfo">
-            <p>联系电话：{{ website.info.contact_phone }}</p>
-            <p>邮箱：{{ website.info.contact_email }}</p>
+            <p>投诉建议：{{ website.info.contact_phone }}</p>
+            <p>商务合作：{{ website.info.contact_email }}</p>
             <p>联系地址：{{ website.info.contact_address }}</p>
-            <p>Copyright &copy; {{ curYear }} <span>{{ website.info.copyright }}</span></p>
+        </div>
+        <div class="copyright">
+            <p>{{ website.info.copyright }}</p>
         </div>
     </div>
 </template>
 
 <script setup>
 import { useWebsite } from '@/stores/website';
-import { ref } from 'vue';
 
 const website = useWebsite();
-const curYear = ref(new Date().getFullYear());
 </script>
 
 <style lang="scss" scoped>
@@ -33,20 +37,26 @@ const curYear = ref(new Date().getFullYear());
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    text-align: center;
+    text-align: left;
     font-size: 22px;
-    .logo{
-        width: 400px;
-        height: 112px;
-        box-sizing: content-box;
-        padding: 20px;
+    .imgs{
+        width: 100%;
+        height: 230px;
         display: flex;
         justify-content: center;
         align-items: center;
-        img{
-            object-fit: contain;
-            max-width: 100%;
-            max-height: 100%;
+        .img{
+            width: 180px;
+            height: 180px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 10px;
+            img{
+                object-fit: contain;
+                max-width: 100%;
+                max-height: 100%;
+            }
         }
     }
     .info{
@@ -54,16 +64,6 @@ const curYear = ref(new Date().getFullYear());
         color: #CCC;
         padding: 10px;
     }
-    .qrcode{
-        width: 290px;
-        height: 290px;
-        background: #FFF;
-        overflow: hidden;
-        margin: 10px auto;
-        img{
-            width: 100%;
-        }
-    }
     .contactInfo{
         color: #CCC;
         font-size: 22px;
@@ -72,5 +72,10 @@ const curYear = ref(new Date().getFullYear());
             line-height: 1.5;
         }
     }
+    .copyright{
+        color: #CCC;
+        line-height: 1.5;
+        text-align: center;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/business/components/CategoryCardList.vue b/src/views/business/components/CategoryCardList.vue
index baf7c8e..db77bbb 100644
--- a/src/views/business/components/CategoryCardList.vue
+++ b/src/views/business/components/CategoryCardList.vue
@@ -8,8 +8,7 @@
                             <img :src="item.cover" :alt="item.title">
                         </div>
                         <div class="title">
-                            <h2>{{ item.title }}</h2>
-                            <span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
+                            <h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2>
                         </div>
                         <div class="desc">{{ item.description }}</div>
                     </li>
@@ -120,7 +119,7 @@ const goDetail = (id) => {
     }
     li{
         width: 100%;
-        height: 428px;
+        min-height: 428px;
         background: #D6D6DD;
         border-radius: 3px;
         border: 5px solid #D6D6DD;
@@ -142,29 +141,30 @@ const goDetail = (id) => {
             }
         }
         .title{
-            height: 80px;
+            // height: 80px;
             width: 100%;
             padding: 20px 10px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             h2{
-                height: 40px;
+                // height: 40px;
                 font-weight: bold;
                 font-size: 28px;
                 line-height: 40px;
-                margin-right: 10px;
+                // margin-right: 10px;
                 flex: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            span{
-                height: 40px;
-                line-height: 40px;
-                display: inline-block;
-                font-size: 22px;
+                span{
+                    font-weight: normal;
+                    padding-right: 5px;
+                }
             }
+            // span{
+            //     height: 40px;
+            //     line-height: 40px;
+            //     display: inline-block;
+            //     font-size: 22px;
+            // }
         }
         .desc{
             margin: 0 10px;