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

2
public/index.html
Unescape View File

@ -5,7 +5,7 @@
<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://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>

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

@ -32,6 +32,8 @@
--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,6 +53,7 @@
--maxMask: rgba(0, 0, 0, 0.7); --maxMask: rgba(0, 0, 0, 0.7);
--white: white; --white: white;
--red: red; --red: red;

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

8
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>
@ -421,7 +421,7 @@
this.isDark = !this.isDark; this.isDark = !this.isDark;
let root = document.querySelector(":root"); let root = document.querySelector(":root");
if (this.isDark) { if (this.isDark) {
root.style.setProperty("--background", "#272727"); root.style.setProperty("--background", "#272727");
root.style.setProperty("--fontColor", "white"); root.style.setProperty("--fontColor", "white");
root.style.setProperty("--borderColor", "#4F4F4F"); root.style.setProperty("--borderColor", "#4F4F4F");
@ -440,6 +440,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({

814
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,427 +138,427 @@
<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,
printer, printer,
articleList, articleList,
myFooter, myFooter,
myAside myAside
}, },
data() {
return {
currentPage1: 1,
loading: false,
showAside: true,
printerInfo: "你看对面的青山多漂亮",
pagination: {
current: 1,
size: 10,
total: 0,
searchKey: "",
sortId: null,
articleSearch: ""
},
guShi: {
"content": "",
"origin": "",
"author": "",
"category": ""
},
articles: [],
table1List: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
drug1: null,
drug2: null,
reaction: null
},
};
},
data() { watch: {},
return {
currentPage1: 1,
loading: false,
showAside: true,
printerInfo: "你看对面的青山多漂亮",
pagination: {
current: 1,
size: 10,
total: 0,
searchKey: "",
sortId: null,
articleSearch: ""
},
guShi: {
"content": "",
"origin": "",
"author": "",
"category": ""
},
articles: [],
table1List: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
drug1: null,
drug2: null,
reaction: null
},
};
},
watch: {}, created() {
this.getGuShi();
this.getArticles();
this.handleQuery();
},
created() { mounted() {
this.getGuShi(); },
this.getArticles();
this.handleQuery();
},
mounted() { methods: {
selectDrugDetails(drugName) {
this.$refs.myAsideRef.updateDrugName(drugName);
}, },
/** 查询药品作用列表条数 */
methods: { getTotal() {
selectDrugDetails(drugName) { listTotal(this.queryParams).then(response => {
this.$refs.myAsideRef.updateDrugName(drugName); this.pagination.total = parseInt(response);
}, console.log(this.pagination.total);
/** 查询药品作用列表条数 */ });
getTotal() { },
listTotal(this.queryParams).then(response => { handleSizeChange(val) {
this.pagination.total = parseInt(response); this.queryParams.pageSize = val; // 修改每页显示数量
console.log(this.pagination.total); this.getList();
}); },
}, handleCurrentChange(val) {
handleSizeChange(val) { this.queryParams.pageNum = val; // 修改每页显示数量
this.queryParams.pageSize = val; // 修改每页显示数量 this.getList();
this.getList(); },
}, /** 搜索按钮操作 */
handleCurrentChange(val) { handleQuery() {
this.queryParams.pageNum = val; // 修改每页显示数量 this.queryParams.pageNum = 1;
this.getList(); this.getList();
}, this.getTotal();
/** 搜索按钮操作 */ // 页面自动下滑效果
handleQuery() { const targetElement = document.querySelector('.recent-posts');
this.queryParams.pageNum = 1; if (targetElement) {
this.getList(); targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
this.getTotal(); }
// 页面自动下滑效果 },
const targetElement = document.querySelector('.recent-posts'); /** 查询药品作用管理列表 */
if (targetElement) { getList() {
targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); // this.loading = true;
} this.table1List = []; // 初始化为空数组
}, listTable1(this.queryParams).then(response => {
/** 查询药品作用管理列表 */ this.table1List = response;
getList() { });
// this.loading = true; },
this.table1List = []; // 初始化为空数组 async selectSort(sort) {
listTable1(this.queryParams).then(response => { this.pagination = {
this.table1List = response; current: 1,
}); size: 10,
}, total: 0,
async selectSort(sort) { searchKey: "",
this.pagination = { sortId: sort.id,
current: 1, articleSearch: ""
size: 10, };
total: 0, this.articles = [];
searchKey: "", await this.getArticles();
sortId: sort.id, this.$nextTick(() => {
articleSearch: "" document.querySelector('.recent-posts').scrollIntoView({
}; behavior: "smooth",
this.articles = []; block: "start",
await this.getArticles(); inline: "nearest"
this.$nextTick(() => {
document.querySelector('.recent-posts').scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
}); });
}, });
async selectArticle(articleSearch) { },
this.pagination = { async selectArticle(articleSearch) {
current: 1, this.pagination = {
size: 10, current: 1,
total: 0, size: 10,
searchKey: "", total: 0,
sortId: null, searchKey: "",
articleSearch: articleSearch sortId: null,
}; articleSearch: articleSearch
this.articles = []; };
await this.getArticles(); this.articles = [];
this.$nextTick(() => { await this.getArticles();
document.querySelector('.recent-posts').scrollIntoView({ this.$nextTick(() => {
behavior: "smooth", document.querySelector('.recent-posts').scrollIntoView({
block: "start", behavior: "smooth",
inline: "nearest" block: "start",
}); inline: "nearest"
}); });
}, });
pageArticles() { },
this.pagination.current = this.pagination.current + 1; pageArticles() {
this.getArticles(); this.pagination.current = this.pagination.current + 1;
}, this.getArticles();
},
async getArticles() { async getArticles() {
await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination) await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
// await this.$http.post("http://localhost:81" + "/system/table1/list", this.pagination) // await this.$http.post("http://localhost:81" + "/system/table1/list", this.pagination)
.then((res) => { .then((res) => {
if (!this.$common.isEmpty(res.data)) { if (!this.$common.isEmpty(res.data)) {
this.articles = this.articles.concat(res.data.records); this.articles = this.articles.concat(res.data.records);
this.pagination.total = res.data.total; this.pagination.total = res.data.total;
} }
}) })
.catch((error) => { .catch((error) => {
this.$message({ this.$message({
message: error.message, message: error.message,
type: "error" type: "error"
});
}); });
},
navigation(selector) {
let pageId = document.querySelector(selector);
window.scrollTo({
top: pageId.offsetTop,
behavior: "smooth"
}); });
}, },
getGuShi() { navigation(selector) {
let that = this; let pageId = document.querySelector(selector);
let xhr = new XMLHttpRequest(); window.scrollTo({
xhr.open('get', this.$constant.jinrishici); top: pageId.offsetTop,
xhr.onreadystatechange = function () { behavior: "smooth"
if (xhr.readyState === 4) { });
that.guShi = JSON.parse(xhr.responseText); },
that.printerInfo = that.guShi.content; getGuShi() {
} let that = this;
}; let xhr = new XMLHttpRequest();
xhr.send(); xhr.open('get', this.$constant.jinrishici);
} xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
that.guShi = JSON.parse(xhr.responseText);
that.printerInfo = that.guShi.content;
}
};
xhr.send();
} }
} }
}
</script> </script>
<style scoped> <style scoped>
.signature-wall { .signature-wall {
/* 向下排列 */ /* 向下排列 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
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;
width: 200%; width: 200%;
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;
width: 400%; width: 400%;
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);
position: absolute; position: absolute;
bottom: 60px; bottom: 60px;
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 {
width: 70%;
}
.announcement {
padding: 22px;
border: 1px dashed var(--lightGray);
color: var(--greyFont);
border-radius: 10px;
display: flex;
max-width: 780px;
margin: 40px auto 40px;
}
.announcement i {
color: var(--themeBackground);
font-size: 22px;
margin: auto 0;
animation: scale 0.8s ease-in-out infinite;
}
.announcement div div {
margin-left: 20px;
line-height: 30px;
}
.aside-content {
width: calc(30% - 40px);
user-select: none;
margin-top: 40px;
margin-right: 40px;
max-width: 300px;
float: right;
}
.pagination-wrap {
display: flex;
justify-content: center;
margin-top: 40px;
}
.pagination {
padding: 13px 15px;
border: 1px solid var(--lightGray);
border-radius: 3rem;
color: var(--greyFont);
width: 100px;
user-select: none;
cursor: pointer;
text-align: center;
}
.pagination:hover {
border: 1px solid var(--themeBackground);
color: var(--themeBackground);
box-shadow: 0 0 5px var(--themeBackground);
}
.ais-SearchBox-input {
padding: 0 14px;
height: 30px;
width: calc(100% - 50px);
outline: 0;
border: 2px solid var(--lightGreen);
border-right: 0;
border-radius: 40px;
color: var(--maxGreyFont);
background: var(--white);
opacity: 0.5;
}
@media screen and (max-width: 1100px) {
.recent-posts { .recent-posts {
width: 70%; width: 100%;
} }
.announcement { .page-container {
padding: 22px; width: 100%;
border: 1px dashed var(--lightGray);
color: var(--greyFont);
border-radius: 10px;
display: flex;
max-width: 780px;
margin: 40px auto 40px;
} }
}
.announcement i { @media screen and (max-width: 1000px) {
color: var(--themeBackground);
font-size: 22px;
margin: auto 0;
animation: scale 0.8s ease-in-out infinite;
}
.announcement div div { .page-container {
margin-left: 20px; /* 文章栏与侧标栏垂直排列 */
line-height: 30px; flex-direction: column;
} }
.aside-content { .aside-content {
width: calc(30% - 40px); width: 100%;
user-select: none; max-width: unset;
margin-top: 40px; float: unset;
margin-right: 40px; margin: 40px auto 0;
max-width: 300px;
float: right;
}
.pagination-wrap {
display: flex;
justify-content: center;
margin-top: 40px;
}
.pagination {
padding: 13px 15px;
border: 1px solid var(--lightGray);
border-radius: 3rem;
color: var(--greyFont);
width: 100px;
user-select: none;
cursor: pointer;
text-align: center;
}
.pagination:hover {
border: 1px solid var(--themeBackground);
color: var(--themeBackground);
box-shadow: 0 0 5px var(--themeBackground);
}
.ais-SearchBox-input {
padding: 0 14px;
height: 30px;
width: calc(100% - 50px);
outline: 0;
border: 2px solid var(--lightGreen);
border-right: 0;
border-radius: 40px;
color: var(--maxGreyFont);
background: var(--white);
opacity: 0.5;
}
@media screen and (max-width: 1100px) {
.recent-posts {
width: 100%;
}
.page-container {
width: 100%;
}
} }
}
@media screen and (max-width: 1000px) { @media screen and (max-width: 768px) {
.page-container {
/* 文章栏与侧标栏垂直排列 */
flex-direction: column;
}
.aside-content { h1 {
width: 100%; font-size: 35px;
max-width: unset;
float: unset;
margin: 40px auto 0;
}
}
@media screen and (max-width: 768px) {
h1 {
font-size: 35px;
}
} }
}
</style> </style>

4
src/utils/constant.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save