pvelz4hta
/
DDI2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
# Conflicts:
#	public/index.html
#	src/assets/css/color.css
#	src/utils/constant.js
master
王岚馨 11 months ago
parent 3635e6f2e2 4949ba709c
commit c0e271a79f
6 changed files with 468 additions and 413 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -3,7 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "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", "build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },

4
public/index.html
Unescape View File

@ -5,8 +5,8 @@
<link rel="icon" href="./poetize.jpg" sizes="16x16"> <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"> <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"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Poetize</title> <title>药药相互</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <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.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> <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

9
src/assets/css/color.css
Unescape View File

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

44
src/assets/css/index.css
Unescape View File

@ -288,3 +288,47 @@ body {
width: 90% !important; 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);
}

6
src/components/home.vue
Unescape View File

@ -38,7 +38,7 @@
<!-- </div>--> <!-- </div>-->
<!-- </li>--> <!-- </li>-->
<!-- 爱情买卖 --> <!-- 预测研发流程 -->
<li @click="$router.push({path: '/love'})"> <li @click="$router.push({path: '/love'})">
<div class="my-menu"> <div class="my-menu">
🥼 <span>预测研发流程</span> 🥼 <span>预测研发流程</span>
@ -448,6 +448,10 @@
root.style.setProperty("--commentContent", "#F7F9FE"); root.style.setProperty("--commentContent", "#F7F9FE");
root.style.setProperty("--favoriteBg", "#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() { toTop() {
window.scrollTo({ window.scrollTo({

244
src/components/index.vue
Unescape View File

@ -10,19 +10,23 @@
<!-- 内容页面 --> <!-- 内容页面 -->
<template slot="body"> <template slot="body">
<!-- 首页图片 --> <!-- 首页图片 -->
<el-image style="animation: header-effect 2s" <!--<el-image style="animation: header-effect 2s"
class="background-image" class="background-image"
v-once v-once
lazy lazy
:src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)" :src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
fit="cover"> fit="cover">
<div slot="error" class="image-slot background-image-error"></div> <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"> <div class="signature-wall myCenter my-animation-hideToShow">
<h1 class="playful"> <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> </h1>
<!-- 搜索 --> <!-- 搜索 -->
@ -79,9 +83,9 @@
<div class="announcement background-opacity"> <div class="announcement background-opacity">
<i class="fa fa-volume-up" aria-hidden="true"></i> <i class="fa fa-volume-up" aria-hidden="true"></i>
<div> <div>
<!-- <div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">--> <!-- <div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">-->
<!-- {{ notice }}--> <!-- {{ notice }}-->
<!-- </div>--> <!-- </div>-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;世界上只有一种真正的英雄主义，那就是看清生活的真相之后，依然勇敢地热爱生活。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;世界上只有一种真正的英雄主义，那就是看清生活的真相之后，依然勇敢地热爱生活。
</div> </div>
</div> </div>
@ -134,14 +138,14 @@
<script> <script>
import {listTable1, listTotal, selectDetails} from "@/utils/table1"; import {listTable1, listTotal, selectDetails} from "@/utils/table1";
const loader = () => import( "./common/loader"); const loader = () => import( "./common/loader");
const zombie = () => import( "./common/zombie"); const zombie = () => import( "./common/zombie");
const printer = () => import( "./common/printer"); const printer = () => import( "./common/printer");
const articleList = () => import( "./articleList"); const articleList = () => import( "./articleList");
const myFooter = () => import( "./common/myFooter"); const myFooter = () => import( "./common/myFooter");
const myAside = () => import( "./myAside"); const myAside = () => import( "./myAside");
export default { export default {
components: { components: {
loader, loader,
zombie, zombie,
@ -312,12 +316,12 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
xhr.send(); xhr.send();
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.signature-wall { .signature-wall {
/* 向下排列 */ /* 向下排列 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -325,85 +329,85 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
user-select: none; user-select: none;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
.playful { .playful {
color: var(--white); color: var(--white);
font-size: 40px; font-size: 40px;
} }
/*.playful span {*/ /*.playful span {*/
/* position: relative;*/ /* position: relative;*/
/* color: #5362f6;*/ /* color: #5362f6;*/
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/ /* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/ /* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/ /* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/ /* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/ /* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/ /* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
/* 6px 6px #e485f8;*/ /* 6px 6px #e485f8;*/
/* animation: scatter 1.75s infinite;*/ /* animation: scatter 1.75s infinite;*/
/* font-weight: normal;*/ /* font-weight: normal;*/
/*}*/ /*}*/
/*.playful span:nth-child(2n) {*/ /*.playful span:nth-child(2n) {*/
/* color: #ed625c;*/ /* color: #ed625c;*/
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/ /* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/ /* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/ /* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/ /* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/ /* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/ /* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
/* 6px 6px #f2a063;*/ /* 6px 6px #f2a063;*/
/* animation-delay: 0.3s;*/ /* animation-delay: 0.3s;*/
/*}*/ /*}*/
/*.playful span:nth-child(3n) {*/ /*.playful span:nth-child(3n) {*/
/* color: #ffd913;*/ /* color: #ffd913;*/
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/ /* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/ /* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/ /* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/ /* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/ /* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/ /* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
/* 6px 6px #6ec0a9;*/ /* 6px 6px #6ec0a9;*/
/* animation-delay: 0.15s;*/ /* animation-delay: 0.15s;*/
/*}*/ /*}*/
/*.playful span:nth-child(5n) {*/ /*.playful span:nth-child(5n) {*/
/* color: #555bff;*/ /* color: #555bff;*/
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/ /* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/ /* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/ /* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/ /* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/ /* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/ /* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
/* 6px 6px #e485f8;*/ /* 6px 6px #e485f8;*/
/* animation-delay: 0.4s;*/ /* animation-delay: 0.4s;*/
/*}*/ /*}*/
/*.playful span:nth-child(7n) {*/ /*.playful span:nth-child(7n) {*/
/* color: #ff9c55;*/ /* color: #ff9c55;*/
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/ /* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/ /* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/ /* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/ /* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/ /* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/ /* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
/* 6px 6px #ff5555;*/ /* 6px 6px #ff5555;*/
/* animation-delay: 0.25s;*/ /* animation-delay: 0.25s;*/
/*}*/ /*}*/
.printer { .printer {
cursor: pointer; cursor: pointer;
color: var(--white); color: var(--white);
background: var(--translucent); background: var(--translucent);
border-radius: 10px; border-radius: 10px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
#bannerWave1 { #bannerWave1 {
height: 84px; height: 84px;
background: var(--bannerWave1); background: var(--bannerWave1);
position: absolute; position: absolute;
@ -411,9 +415,9 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
animation: gradientBG 120s linear infinite; animation: gradientBG 120s linear infinite;
} }
#bannerWave2 { #bannerWave2 {
height: 100px; height: 100px;
background: var(--bannerWave2); background: var(--bannerWave2);
position: absolute; position: absolute;
@ -421,16 +425,16 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
animation: gradientBG 120s linear infinite; animation: gradientBG 120s linear infinite;
} }
/* 光标 */ /* 光标 */
.cursor { .cursor {
margin-left: 1px; margin-left: 1px;
animation: hideToShow 0.7s infinite; animation: hideToShow 0.7s infinite;
font-weight: 200; font-weight: 200;
} }
.el-icon-arrow-down { .el-icon-arrow-down {
font-size: 40px; font-size: 40px;
font-weight: bold; font-weight: bold;
color: var(--white); color: var(--white);
@ -439,27 +443,27 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
animation: my-shake 1.5s ease-out infinite; animation: my-shake 1.5s ease-out infinite;
z-index: 15; z-index: 15;
cursor: pointer; cursor: pointer;
} }
.page-container-wrap { .page-container-wrap {
background: var(--background); background: var(--background);
position: relative; position: relative;
} }
.page-container { .page-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 90%; width: 90%;
padding: 0 20px 40px 20px; padding: 0 20px 40px 20px;
margin: 0 auto; margin: 0 auto;
flex-direction: row; flex-direction: row;
} }
.recent-posts { .recent-posts {
width: 70%; width: 70%;
} }
.announcement { .announcement {
padding: 22px; padding: 22px;
border: 1px dashed var(--lightGray); border: 1px dashed var(--lightGray);
color: var(--greyFont); color: var(--greyFont);
@ -467,36 +471,36 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
display: flex; display: flex;
max-width: 780px; max-width: 780px;
margin: 40px auto 40px; margin: 40px auto 40px;
} }
.announcement i { .announcement i {
color: var(--themeBackground); color: var(--themeBackground);
font-size: 22px; font-size: 22px;
margin: auto 0; margin: auto 0;
animation: scale 0.8s ease-in-out infinite; animation: scale 0.8s ease-in-out infinite;
} }
.announcement div div { .announcement div div {
margin-left: 20px; margin-left: 20px;
line-height: 30px; line-height: 30px;
} }
.aside-content { .aside-content {
width: calc(30% - 40px); width: calc(30% - 40px);
user-select: none; user-select: none;
margin-top: 40px; margin-top: 40px;
margin-right: 40px; margin-right: 40px;
max-width: 300px; max-width: 300px;
float: right; float: right;
} }
.pagination-wrap { .pagination-wrap {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 40px; margin-top: 40px;
} }
.pagination { .pagination {
padding: 13px 15px; padding: 13px 15px;
border: 1px solid var(--lightGray); border: 1px solid var(--lightGray);
border-radius: 3rem; border-radius: 3rem;
@ -505,15 +509,15 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
.pagination:hover { .pagination:hover {
border: 1px solid var(--themeBackground); border: 1px solid var(--themeBackground);
color: var(--themeBackground); color: var(--themeBackground);
box-shadow: 0 0 5px var(--themeBackground); box-shadow: 0 0 5px var(--themeBackground);
} }
.ais-SearchBox-input { .ais-SearchBox-input {
padding: 0 14px; padding: 0 14px;
height: 30px; height: 30px;
width: calc(100% - 50px); width: calc(100% - 50px);
@ -524,9 +528,9 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
color: var(--maxGreyFont); color: var(--maxGreyFont);
background: var(--white); background: var(--white);
opacity: 0.5; opacity: 0.5;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.recent-posts { .recent-posts {
width: 100%; width: 100%;
} }
@ -534,9 +538,9 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
.page-container { .page-container {
width: 100%; width: 100%;
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.page-container { .page-container {
/* 文章栏与侧标栏垂直排列 */ /* 文章栏与侧标栏垂直排列 */
@ -549,12 +553,12 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
float: unset; float: unset;
margin: 40px auto 0; margin: 40px auto 0;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
h1 { h1 {
font-size: 35px; font-size: 35px;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save