no99
1 week ago
11 changed files with 901 additions and 40 deletions
-
3README.md
-
468package-lock.json
-
2package.json
-
BINsrc/assets/fonts/方正新综艺简体.ttf
-
BINsrc/assets/img/标题.png
-
BINsrc/assets/img/角标.png
-
BINsrc/assets/img/锁定.png
-
5src/router/index.js
-
331src/views/calendar/calendar.vue
-
1src/views/homepage.vue
-
131src/views/homework/homework.vue
|
After Width: 330 | Height: 39 | Size: 7.4 KiB |
|
After Width: 109 | Height: 91 | Size: 7.6 KiB |
|
After Width: 33 | Height: 32 | Size: 644 B |
@ -0,0 +1,331 @@ |
|||||
|
<template> |
||||
|
<div class="bk"> |
||||
|
<div class="bk1"> |
||||
|
<div class="border1"> |
||||
|
<div class="title"> |
||||
|
<img :src="biaoti" alt="标题" class="titleImg" /> |
||||
|
<div class="titleContent"> |
||||
|
{{ calendarDate }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="secondTitle"> |
||||
|
<div v-for="item in week" :key="item" class="secondTitleItems"> |
||||
|
<div class="secondTitleItem">{{ item }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="calendar"> |
||||
|
<div v-for="row in 5" :key="row" class="calendarCol"> |
||||
|
<div |
||||
|
v-for="item in currentData.slice((row - 1) * 7, row * 7)" |
||||
|
:key="item" |
||||
|
class="calendarRow" |
||||
|
> |
||||
|
<div |
||||
|
class="calendarItem" |
||||
|
:style="{ backgroundColor: item.color }" |
||||
|
> |
||||
|
<div v-if="item.month" class="month"> |
||||
|
<div class="monthContent"> |
||||
|
{{ months[item.month - 1] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="calendarItemTitle">{{ item.day }}</div> |
||||
|
<div |
||||
|
class="calendarItemContent" |
||||
|
v-if="item.stock_temperature == ''" |
||||
|
> |
||||
|
<img :src="suoding" alt="锁定" class="ciImg" /> |
||||
|
</div> |
||||
|
<div |
||||
|
class="calendarItemContent" |
||||
|
v-else-if="item.stock_temperature == '休市'" |
||||
|
> |
||||
|
休市 |
||||
|
</div> |
||||
|
<div class="calendarItemContent" v-else> |
||||
|
{{ item.market_temperature }} | {{ item.stock_temperature }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { onMounted, ref } from "vue"; |
||||
|
import axios from "axios"; |
||||
|
import biaoti from "../../assets/img/标题.png"; |
||||
|
import jiaobiao from "../../assets/img/角标.png"; |
||||
|
import suoding from "../../assets/img/锁定.png"; |
||||
|
import moment from "moment"; |
||||
|
|
||||
|
const color = ref([ |
||||
|
"#32A3FF", |
||||
|
"#2BD977", |
||||
|
"#A239FF", |
||||
|
"#FF7945", |
||||
|
"#FF5289", |
||||
|
"#5791CB", |
||||
|
]); |
||||
|
|
||||
|
const months = ref([ |
||||
|
"一月", |
||||
|
"二月", |
||||
|
"三月", |
||||
|
"四月", |
||||
|
"五月", |
||||
|
"六月", |
||||
|
"七月", |
||||
|
"八月", |
||||
|
"九月", |
||||
|
"十月", |
||||
|
"十一月", |
||||
|
"十二月", |
||||
|
]); |
||||
|
|
||||
|
const calendarDate = ref(moment().format("YYYY年M月")); |
||||
|
const week = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]); |
||||
|
const currentData = ref([]); |
||||
|
const fetchData = async () => { |
||||
|
try { |
||||
|
const response = await axios.post( |
||||
|
// 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData', |
||||
|
// `${apiUrl}/api/aiEmotion/client/getAiEmotionData`, |
||||
|
"http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData", |
||||
|
{ |
||||
|
token: |
||||
|
"pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q", |
||||
|
market: "usa", |
||||
|
code: "AAPL", |
||||
|
language: "cn", |
||||
|
version: "1", |
||||
|
// token: |
||||
|
// 'oikn6FZW1BTIb4C3rRXnbZi0+fEeMx8pywnIlrmTwN4SbPUkxGnUWug7+5p9KiY7e9lWYvSoydZ+Ra/wuMA', |
||||
|
// code: '1295', |
||||
|
// market: 'my', |
||||
|
// language: 'cn', |
||||
|
// version: '2' |
||||
|
} |
||||
|
// { |
||||
|
// headers: { 'Content-Type': 'application/json' } |
||||
|
// } |
||||
|
); |
||||
|
|
||||
|
console.log(response.data); |
||||
|
if (response.data.code === 200) { |
||||
|
const WDRL = response.data.data.WDRL ? response.data.data.WDRL : []; |
||||
|
currentData.value = JSON.parse(JSON.stringify(WDRL)); |
||||
|
for (let i = 0; i < currentData.value.length; i++) { |
||||
|
const day = moment(currentData.value[i].date).date(); |
||||
|
currentData.value[i].day = day; |
||||
|
if (i == 0 || day == 1) { |
||||
|
currentData.value[i].month = |
||||
|
moment(currentData.value[i].date).month() + 1; |
||||
|
} |
||||
|
const tp = currentData.value[i].stock_temperature; |
||||
|
if (tp == "" || tp == null || tp == "休市") { |
||||
|
currentData.value[i].color = color.value[5]; |
||||
|
} else { |
||||
|
if (tp <= "20") { |
||||
|
currentData.value[i].color = color.value[0]; |
||||
|
} else if (parseInt(tp) <= "50") { |
||||
|
currentData.value[i].color = color.value[1]; |
||||
|
} else if (parseInt(tp) <= "70") { |
||||
|
currentData.value[i].color = color.value[2]; |
||||
|
} else if (parseInt(tp) <= "90") { |
||||
|
currentData.value[i].color = color.value[3]; |
||||
|
} else { |
||||
|
currentData.value[i].color = color.value[4]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
console.log(currentData.value); |
||||
|
} else { |
||||
|
console.log("请求失败1"); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
console.log("请求失败2"); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
fetchData(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
@font-face { |
||||
|
font-family: "方正新综艺简体"; |
||||
|
src: url("../../assets/fonts/方正新综艺简体.ttf") format("truetype"); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
font-display: swap; |
||||
|
} |
||||
|
.title { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.titleImg { |
||||
|
width: 100%; |
||||
|
margin-top: 10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.titleContent { |
||||
|
font-family: "方正新综艺简体"; |
||||
|
font-size: 2vw; |
||||
|
color: #00ffff; |
||||
|
position: absolute; |
||||
|
top: 15px; |
||||
|
left: 30px; |
||||
|
} |
||||
|
|
||||
|
.secondTitle { |
||||
|
width: 100%; |
||||
|
height: 35px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.secondTitleItems { |
||||
|
/* width: 100%; */ |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.secondTitleItem { |
||||
|
border: 1px solid #03a7ce; |
||||
|
background-color: #0b3c73; |
||||
|
width: 6vw; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.calendar { |
||||
|
margin-top: 30px; |
||||
|
width: 100%; |
||||
|
height: 70%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.calendarCol { |
||||
|
/* width: 100%; */ |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.calendarRow { |
||||
|
/* width: 100%; */ |
||||
|
height: 100%; |
||||
|
} |
||||
|
.calendarItem { |
||||
|
border: 1px solid #0060af; |
||||
|
width: 6vw; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
border-radius: 10px; |
||||
|
color: #ffffff; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.month { |
||||
|
position: absolute; |
||||
|
background-image: url("../../assets/img/角标.png"); |
||||
|
background-size: 100% 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
width: 4.5vw; |
||||
|
height: 4vw; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
/* align-items: center; */ |
||||
|
top: -2vw; |
||||
|
right: -1vw; |
||||
|
} |
||||
|
|
||||
|
.monthContent { |
||||
|
margin-top: 0.8vw; |
||||
|
} |
||||
|
|
||||
|
.calendarItemTitle { |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.calendarItemContent { |
||||
|
width: 100%; |
||||
|
/* text-align: center; */ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.ciImg { |
||||
|
width: 35%; |
||||
|
} |
||||
|
|
||||
|
.bk { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.bk1 { |
||||
|
background-color: #192ca0; |
||||
|
width: 50%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 20px 0px; |
||||
|
} |
||||
|
|
||||
|
.border1 { |
||||
|
border: 2px solid #14bddb; |
||||
|
background-color: #1f669e; |
||||
|
width: 45vw; |
||||
|
height: 44vw; |
||||
|
border-radius: 1%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
/* margin: 0px; */ |
||||
|
} |
||||
|
|
||||
|
.border1::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: -2.5px; |
||||
|
left: -2.5px; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
border-top: 3px solid #00ffff; /* 左上角颜色 */ |
||||
|
border-left: 3px solid #00ffff; |
||||
|
border-top-left-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.border1::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
bottom: -2px; |
||||
|
right: -2px; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
border-bottom: 3px solid #00ffff; /* 右下角颜色 */ |
||||
|
border-right: 3px solid #00ffff; |
||||
|
border-bottom-right-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue