完成昼夜切换功能

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
+    "serve": "vue-cli-service serve",
     "build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

public/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="./poetize.jpg" sizes="16x16">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Poetize</title>
+    <title>药药相互</title>
 
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>

src/assets/css/color.css

@@ -32,6 +32,8 @@
     --maxGreyFont: #595A5A;
     /* footer背景 */
     --gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+
+
     /* 白色遮罩 */
     --whiteMask: rgba(255, 255, 255, 0.3);
     /* max白色遮罩 */
@@ -51,6 +53,7 @@
     --maxMask: rgba(0, 0, 0, 0.7);
 
 
+
     --white: white;
 
     --red: red;

src/assets/css/index.css

@@ -288,3 +288,47 @@ body {
         width: 90% !important;
     }
 }
+
+/* 背景*/
+.dark-mode-sky,
+.dark-mode-sky::before{
+    content: "";
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    /* 固定位置，不随滚动条滚动 */
+    position: fixed;
+    z-index: -1;
+    transition: 2s ease all;
+}
+.dark-mode-sky{
+    background: linear-gradient(#fcd5ce,#f8edeb);
+}
+.dark-mode-sky::before{
+    opacity: 0;
+    background: linear-gradient(#001233,#002855,#0466c8);
+}
+.dark-mode .dark-mode-sky::before{
+    opacity: 1;
+}
+/*日月*/
+.dark-mode-planet {
+    z-index: 19999999999;
+    position: fixed;
+    left: -50%;
+    top: -50%;
+    width: 200%;
+    height: 200%;
+    transition: 2s cubic-bezier(.7,0,0,1) all;
+    transform-origin: center bottom;
+}
+.dark-mode-planet::after{
+    position: absolute;
+    left: 35%;
+    top: 40%;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    content: "";
+    background: linear-gradient(#ffffff,#f1f3b7);
+}

src/components/home.vue

@@ -38,7 +38,7 @@
 <!--              </div>-->
 <!--            </li>-->
 
-            <!-- 爱情买卖 -->
+            <!-- 预测研发流程 -->
             <li @click="$router.push({path: '/love'})">
               <div class="my-menu">
                 🥼 <span>预测研发流程</span>
@@ -440,6 +440,10 @@
           root.style.setProperty("--commentContent", "#F7F9FE");
           root.style.setProperty("--favoriteBg", "#f7f9fe");
         }
+        $("body").toggleClass("dark-mode");
+        var angle = $('.dark-mode-planet').data('angle') + 360 || 360;
+        $('.dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)'});
+        $('.dark-mode-planet').data('angle',angle);
       },
       toTop() {
         window.scrollTo({

src/components/index.vue

@@ -10,19 +10,23 @@
       <!-- 内容页面 -->
       <template slot="body">
         <!-- 首页图片 -->
-        <el-image style="animation: header-effect 2s"
+         <!--<el-image style="animation: header-effect 2s"
                     class="background-image"
                     v-once
                     lazy
                     :src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                     fit="cover">
             <div slot="error" class="image-slot background-image-error"></div>
-        </el-image>
+          </el-image>-->
+        <div class="dark-mode-sky">
+          <div class="dark-mode-planet"></div>
+        </div>
 
         <!-- 首页文字 -->
         <div class="signature-wall myCenter my-animation-hideToShow">
           <h1 class="playful">
-            <span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
+            <p>药 药 相 互 </p>
+            <!--<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>-->
           </h1>
 
           <!-- 搜索 -->

src/utils/constant.js

@@ -3,7 +3,7 @@ export default {
   imBaseURL: "http://localhost:81",
   webURL: "http://localhost",
 
-  // baseURL: "https://poetize.cn/api",
+  // baseURL: "https://.cn/api",
   // imBaseURL: "https://poetize.cn/im",
   // webURL: "https://poetize.cn",
 
@@ -19,7 +19,7 @@ export default {
   cryptojs_key: "aoligeimeimaobin",
   qiniuUrl: "https://upload.qiniup.com",
   // qiniuDownload: "$$$$七牛云下载地址，仿照【https://file.poetize.cn/】",
-  qiniuDownload: "http://s6ondx7d9.hd-bkt.clouddn.com/",
+  qiniuDownload: "http://s6qc8qkjn.hd-bkt.clouddn.com/",
   favoriteVideo: "$$$$自己找一个视频链接作为百宝箱的封面",
 
   loveWeiYan: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",