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

完成昼夜切换功能

Browse Source
master
xiaohua030729 11 months ago
parent c64f67086f
commit 9f27ad65b6
7 changed files with 466 additions and 411 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -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"
},

2
public/index.html
Unescape View File

@ -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>

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

@ -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;

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

@ -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);
}

6
src/components/home.vue
Unescape View File

@ -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({

244
src/components/index.vue
Unescape View File

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

4
src/utils/constant.js
Unescape View File

@ -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",

Write Preview
Loading…
Cancel
Save