Merge branch 'master' of https://gitee.com/ynmlzdwsp/ddi2

# Conflicts:
#	public/index.html
#	src/assets/css/color.css
#	src/utils/constant.js

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,8 +5,8 @@
     <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>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <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>
     <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

src/assets/css/color.css

@@ -19,7 +19,7 @@
 
 
     /* 主题背景 */
-    --themeBackground: #f5df74;
+    --themeBackground: orange;
     /* 主题悬停背景 */
     --gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
 
@@ -28,10 +28,12 @@
     /* 导航栏背景 */
     --toolbarBackground: rgba(255, 255, 255, 1);
     /* 灰色字体 */
-    --greyFont: #4b4b4b;
+    --greyFont: #797979;
     --maxGreyFont: #595A5A;
     /* footer背景 */
     --gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+
+
     /* 白色遮罩 */
     --whiteMask: rgba(255, 255, 255, 0.3);
     /* max白色遮罩 */
@@ -51,7 +53,8 @@
     --maxMask: rgba(0, 0, 0, 0.7);
 
 
-    --white: #000000;
+
+    --white: white;
 
     --red: red;
     --lightRed: #ff4b2b;

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>
@@ -448,6 +448,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>
 
           <!-- 搜索 -->