Skip to content

V
vue3-quasar-ts-study01
Commit ba61ea12 authored by hucy's avatar hucy ☘
Browse files
Options

chore:一言

parent 7367254c
Show whitespace changes
Inline Side-by-side
Showing with 584 additions and 50 deletions
package.json
View file @ ba61ea12
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"decimal.js": "^10.4.2", "decimal.js": "^10.4.2",
"echarts": "^5.3.2", "echarts": "^5.4.1",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"pinia": "^2.0.14", "pinia": "^2.0.14",
......
src/modules/page10/config.ts
View file @ ba61ea12
...@@ -1251,4 +1251,32 @@ export const poems = [ ...@@ -1251,4 +1251,32 @@ export const poems = [
color: '#E7F6F2', color: '#E7F6F2',
}, },
}, },
{
key: '126',
author: '柳永',
content: ['才子佳人，自是白衣卿相'],
style: {
backgroundImage:
'linear-gradient(25deg, #0b6892, #6789af, #a5accd, #e2d0eb)',
color: '#ffffff',
},
},
{
key: '127',
author: '李白',
content: ['事了拂衣去，深藏功与名'],
style: {
backgroundColor: '#615760',
color: '#DBAE21',
},
},
{
key: '128',
author: '苏轼',
content: ['麤（cū）缯大布裹生涯，腹有诗书气自华'],
style: {
backgroundColor: '#6A5F5C',
color: '#E18689',
},
},
]; ];
src/modules/page10/element/MyPoems.vue
View file @ ba61ea12
...@@ -27,10 +27,10 @@ const { info } = useMessage(); ...@@ -27,10 +27,10 @@ const { info } = useMessage();
const source = ref(require('../media/羽肿-花火が瞬く夜に.mp3')); const source = ref(require('../media/羽肿-花火が瞬く夜に.mp3'));
const isPlaying = ref(false); const isPlaying = ref(false);
const carouselRef = ref<any>(null); const carouselRef = ref<any>(null);
const slide = ref('125'); const slide = ref('128');
onMounted(() => { onMounted(() => {
rightClick(); // rightClick();
}); });
function getStyle(data: any) { function getStyle(data: any) {
...@@ -113,7 +113,7 @@ function onPlaying() { ...@@ -113,7 +113,7 @@ function onPlaying() {
transition-prev="fade" transition-prev="fade"
transition-next="fade" transition-next="fade"
:transition-duration="1500" :transition-duration="1500"
:autoplay="8000" arrows
animated animated
infinite infinite
height="100%" height="100%"
...@@ -274,19 +274,23 @@ function onPlaying() { ...@@ -274,19 +274,23 @@ function onPlaying() {
.rotate-animate { .rotate-animate {
animation: rotate 3s linear infinite; animation: rotate 3s linear infinite;
} }
:deep(.my-media-player :deep(
.my-media-player
.q-media__controls .q-media__controls
.q-slider .q-slider
.q-slider__track-container .q-slider__track-container
.q-slider__track) { .q-slider__track
) {
color: #306e8a; color: #306e8a;
} }
:deep(.my-media-player :deep(
.my-media-player
.q-media__controls .q-media__controls
.q-slider .q-slider
.q-slider__track-container .q-slider__track-container
.q-slider__track .q-slider__track
.q-slider__thumb) { .q-slider__thumb
) {
color: #306e8a; color: #306e8a;
} }
</style> </style>
src/modules/vue-study/IndexPage.vue
View file @ ba61ea12
...@@ -11,7 +11,9 @@ import { reactive, onMounted, watch, ref, nextTick, markRaw } from 'vue'; ...@@ -11,7 +11,9 @@ import { reactive, onMounted, watch, ref, nextTick, markRaw } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
// import { useMessage } from 'src/common/hooks'; // import { useMessage } from 'src/common/hooks';
import PROVICE from './provice'; import PROVICE from './provice';
import { ChartOption } from './config'; import { ChartOption, Series_A, Series_B, Series_D } from './config';
import DateDetail from './element/DateDetail.vue';
import ImageScale from './element/ImageScale.vue';
// const { info } = useMessage(); // const { info } = useMessage();
...@@ -20,6 +22,12 @@ const regionSelectRef = ref<any>(null); ...@@ -20,6 +22,12 @@ const regionSelectRef = ref<any>(null);
const chartRef = ref<any>(null); const chartRef = ref<any>(null);
const showContent = ref(false); const showContent = ref(false);
const showContent2 = ref(false);
const legendState = reactive<any>({
A: { show: true },
B: { show: false },
D: { show: true },
});
const state = reactive({ const state = reactive({
province: null as any, province: null as any,
provinceOpt: [] as any[], provinceOpt: [] as any[],
...@@ -67,16 +75,43 @@ function handleData() { ...@@ -67,16 +75,43 @@ function handleData() {
} }
function setChart() { function setChart() {
let option: { series: any[] } = ChartOption;
let series = [];
if (legendState.A.show) {
series.push(...Series_A);
}
if (legendState.B.show) {
series.push(...Series_B);
}
if (legendState.D.show) {
series.push(...Series_D);
}
option.series = series;
if (state.myChart?.id) {
// state.myChart.dispose();
state.myChart.setOption(option, true);
} else {
state.myChart = markRaw(echarts.init(chartRef.value)); state.myChart = markRaw(echarts.init(chartRef.value));
state.myChart.setOption(ChartOption); state.myChart.setOption(option);
}
} }
function showBox() { function showBox() {
showContent.value = !showContent.value; showContent.value = !showContent.value;
} }
function showDate() {
showContent2.value = !showContent2.value;
}
// function clickChartBox(e: any) { // function clickChartBox(e: any) {
// e.stopPropagation(); // 阻止冒泡 // e.stopPropagation(); // 阻止冒泡
// } // }
function clickLegend(type: string) {
legendState[type].show = !legendState[type].show;
setChart();
}
</script> </script>
<template> <template>
<div> <div>
...@@ -133,13 +168,76 @@ function showBox() { ...@@ -133,13 +168,76 @@ function showBox() {
</div> </div>
</div> </div>
<div class="chart-box" ref="chartRef"></div> <div class="chart-box" ref="chartRef"></div>
<div class="legend-box"></div> <div class="legend-box">
<div
:class="[
'legend-box-item',
legendState.A.show ? 'opacity-1' : 'opacity-dis-4',
]"
@click="clickLegend('A')"
>
<div class="legend-icon legend-icon-A"></div>
<div class="legend-title">A</div>
</div>
<div
:class="[
'legend-box-item',
legendState.B.show ? 'opacity-1' : 'opacity-dis-4',
]"
@click="clickLegend('B')"
>
<div class="legend-icon legend-icon-B"></div>
<div class="legend-title">B/C</div>
</div>
<div
:class="[
'legend-box-item',
legendState.D.show ? 'opacity-1' : 'opacity-dis-4',
]"
@click="clickLegend('D')"
>
<div class="legend-icon legend-icon-D"></div>
<div class="legend-title">D/E</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="aniamte-box q-pa-md relative-position" style="width: 400px">
<div
:class="['square', showContent2 ? 'square-show-date' : 'square-hide']"
>
<div class="title-box cursor-pointer" @click="showDate">
<div class="title-text">日期</div>
<div class="title-action">
<div
:class="[
'icon-box',
showContent2 ? 'icon-box-show' : 'icon-box-hide',
]"
>
<q-icon name="expand_more" />
</div>
</div>
</div>
<div class="chart-box" style="height: 620px">
<DateDetail />
</div> </div>
</div> </div>
</div> </div>
<ImageScale />
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.opacity-1 {
opacity: 1;
}
.opacity-dis-4 {
opacity: 0.4;
}
.item-box { .item-box {
display: flex; display: flex;
column-gap: 16px; column-gap: 16px;
...@@ -198,11 +296,68 @@ function showBox() { ...@@ -198,11 +296,68 @@ function showBox() {
} }
.legend-box { .legend-box {
position: absolute; position: absolute;
width: 130px; width: 80px;
height: 100px; // background-color: pink;
background-color: pink;
top: 160px; top: 160px;
right: 0; right: 0;
.legend-box-item {
width: 100%;
box-sizing: border-box;
min-height: 24px;
// background-color: aqua;
display: flex;
align-items: center;
&:hover {
cursor: pointer;
}
.legend-icon {
width: 28px;
height: 24px;
flex-shrink: 0;
// background-color: red;
position: relative;
margin-right: 8px;
&::before {
position: absolute;
content: '';
width: 100%;
top: 10px;
left: 0;
}
}
.legend-icon-A {
&::before {
border-top: 2px solid #f2317f;
}
&::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid #f2317f;
background-color: #fff;
top: 7px;
left: 10px;
}
}
.legend-icon-B {
&::before {
border-top: 2px dashed #a696c8;
}
}
.legend-icon-D {
&::before {
border-top: 2px solid #8bc24c;
}
}
.legend-title {
font-size: 12px;
color: rgb(94, 94, 94);
}
}
} }
} }
.square-hide { .square-hide {
...@@ -213,4 +368,8 @@ function showBox() { ...@@ -213,4 +368,8 @@ function showBox() {
height: 340px; height: 340px;
border-radius: 12px; border-radius: 12px;
} }
.square-show-date {
height: 660px;
border-radius: 12px;
}
</style> </style>
src/modules/vue-study/config.ts
View file @ ba61ea12
...@@ -12,7 +12,7 @@ export const ChartOption = { ...@@ -12,7 +12,7 @@ export const ChartOption = {
// }, // },
grid: { grid: {
left: 60, left: 60,
right: 140, right: 110,
bottom: 40, bottom: 40,
top: 60, top: 60,
}, },
...@@ -23,31 +23,64 @@ export const ChartOption = { ...@@ -23,31 +23,64 @@ export const ChartOption = {
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ series: [],
};
export const Series_A = [
{ {
name: 'Email', name: 'A',
type: 'line', type: 'line',
data: [120, 132, 101, 134, 90, 230, 210], data: [820, 932, 901, 934, 1290, 1330, 1320],
itemStyle: {
color: '#f2317f',
}, },
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310],
}, },
];
export const Series_B = [
{ {
name: 'Video Ads', name: 'B',
type: 'line', type: 'line',
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410],
symbol: 'none',
itemStyle: {
color: '#a696c8',
},
lineStyle: {
type: 'dashed', //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
},
}, },
{ {
name: 'Direct', name: 'C',
type: 'line', type: 'line',
data: [320, 332, 301, 334, 390, 330, 320], data: [320, 332, 301, 334, 390, 330, 320],
symbol: 'none',
itemStyle: {
color: '#a696c8',
},
lineStyle: {
type: 'dashed',
},
}, },
];
export const Series_D = [
{ {
name: 'Search Engine', name: 'D',
type: 'line', type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [220, 182, 191, 234, 290, 330, 310],
// 设置小圆点消失
// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
symbol: 'none',
itemStyle: {
color: '#8bc24c',
}, },
], },
}; {
name: 'E',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
symbol: 'none',
itemStyle: {
color: '#8bc24c',
},
},
];
src/modules/vue-study/element/DateDetail.vue 0 → 100644
View file @ ba61ea12
<script setup lang="ts">
import { reactive } from 'vue';
const dateMsg = reactive({
date: '2023-03-20',
week: '周一',
day: '20',
detail: [
['癸卯(兔)年', '二月廿九'],
['乙卯(兔)月', '丁丑(牛)日'],
['本年第12周', '第79天'],
],
zodiac: '兔',
constellation: '双鱼座',
suitable: [
'祭祀',
'订盟',
'纳采',
'修造',
'动土',
'祈福',
'塑绘',
'斋醮',
'沐浴',
'拆卸',
'起基',
'入宅',
'安香',
'造庙',
'移柩',
'谢土',
'除服',
'成服',
'入学',
'习艺',
'出行',
'竖柱',
'上梁',
'掘井',
'求嗣',
'解除',
'伐木',
],
taboo: ['作灶', '安葬', '开市', '盖屋'],
moon: '晓月',
phenology: '鹰化为鸠',
good_direction: '正南',
sun_direction: '西北',
cloudy_direction: '正西',
happy_direction: '东南',
wealth_direction: '西南',
});
</script>
<template>
<div class="box">
<div>
{{ dateMsg.date }}
&nbsp;
{{ dateMsg.week }}
</div>
<div class="day-box">{{ dateMsg.day }}</div>
<div class="detail-box">
<div class="align-right">{{ dateMsg.detail[0][0] }}</div>
<div>{{ dateMsg.detail[0][1] }}</div>
<div class="align-right">{{ dateMsg.detail[1][0] }}</div>
<div>{{ dateMsg.detail[1][1] }}</div>
<div class="align-right">{{ dateMsg.detail[2][0] }}</div>
<div>{{ dateMsg.detail[2][1] }}</div>
</div>
<div class="line"></div>
<div class="middle-item">
<div class="legend" style="background: #ffc300">生肖</div>
<div class="text-grey-6">{{ dateMsg.zodiac }}</div>
</div>
<div class="line"></div>
<div class="middle-item">
<div class="legend" style="background: #02c9c9">星座</div>
<div class="text-grey-6">{{ dateMsg.constellation }}</div>
</div>
<div class="line"></div>
<div class="middle-item">
<div class="legend" style="background: #bccf3d">宜</div>
<div class="text-grey-6">{{ dateMsg.suitable.join('，') }}</div>
</div>
<div class="line"></div>
<div class="middle-item">
<div class="legend" style="background: #eb5651">忌</div>
<div class="text-grey-6">{{ dateMsg.taboo.join('，') }}</div>
</div>
<div class="line"></div>
<div class="row full-width">
<div class="row col-6">
<div class="legend" style="background: #c5bd99">月相</div>
<div class="text-grey-6">{{ dateMsg.moon }}</div>
</div>
<div class="row col-6">
<div class="legend" style="background: #c5bd99">物候</div>
<div class="text-grey-6">{{ dateMsg.phenology }}</div>
</div>
</div>
<div class="line"></div>
<div class="full-width">
<div class="text-grey-6">喜神方位：{{ dateMsg.good_direction }}</div>
<div class="text-grey-6">阳贵神方位：{{ dateMsg.sun_direction }}</div>
<div class="text-grey-6">阴贵方位：{{ dateMsg.cloudy_direction }}</div>
<div class="text-grey-6">福神方位：{{ dateMsg.happy_direction }}</div>
<div class="text-grey-6">财神方位：{{ dateMsg.wealth_direction }}</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px;
}
.align-right {
text-align: right;
}
.line {
width: 100%;
height: 1px;
background-color: rgba(180, 180, 180, 0.3);
}
.legend {
color: #fff;
padding: 0 5px;
border-radius: 4px;
margin-right: 10px;
font-size: 13px;
flex: 0 0 auto;
align-self: flex-start;
}
.day-box {
width: 80px;
height: 80px;
margin: 8px 0;
color: #fff;
background-color: #e8a0b8;
border-radius: 10px;
font-size: 50px;
text-align: center;
line-height: 90px;
position: relative;
&::before {
position: absolute;
content: '';
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
top: 8px;
left: 8px;
}
&::after {
position: absolute;
content: '';
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
top: 8px;
right: 8px;
}
}
.detail-box {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
.middle-item {
width: 100%;
display: flex;
}
</style>
src/modules/vue-study/element/ImageScale.vue 0 → 100644
View file @ ba61ea12
<script setup lang="ts">
import { ref, reactive } from 'vue';
const imgUrl = ref('https://w.wallhaven.cc/full/kx/wallhaven-kx98xd.jpg');
const standard = ref(100);
const state = reactive({
zoomVal: 1,
left: 0,
top: 0,
});
function onMousedown(e: any) {
let oDiv = e.target; // 获取当前元素
// 算出鼠标相对元素的位置
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function (e: any) {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
// oDiv.style.left = left + 'px';
// oDiv.style.top = top + 'px';
state.left = left;
state.top = top;
};
//为document绑定一个鼠标抬起事件，鼠标松开时，将box固定在当前位置
document.onmouseup = function () {
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
}
function onWheel(e: any) {
let direction = e.deltaY > 0 ? 'down' : 'up';
let val = state.zoomVal;
if (direction === 'up') {
// 滑轮向上滚动
val += 0.1;
if (val >= 2) {
val = 2;
}
} else {
// 滑轮向下滚动
val -= 0.1;
if (val <= 0.2) {
val = 0.2;
}
}
let diffScale = val - state.zoomVal;
let diffX = e.offsetX * diffScale;
let diffY = e.offsetY * diffScale;
state.zoomVal = val;
standard.value = Number((val * 100).toFixed(2));
state.left -= diffX;
state.top -= diffY;
}
function sliderUpdate(value: any) {
state.zoomVal = value / 100;
}
</script>
<template>
<div class="box q-ma-md">
<div class="tool-box">
<q-slider
v-model="standard"
:inner-min="20"
:min="0"
:max="200"
label
:label-value="standard + '%'"
@update:model-value="sliderUpdate"
/>
</div>
<div class="img-box">
<div
class="img-mask"
@mousedown.prevent="onMousedown"
@mousewheel.prevent="onWheel"
:style="{
backgroundImage: `url(${imgUrl})`,
transform: `scale(${state.zoomVal})`,
left: state.left + 'px',
top: state.top + 'px',
}"
></div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 800px;
height: 500px;
}
.tool-box {
box-sizing: border-box;
height: 40px;
border-top: 1px solid rgba(180, 180, 180, 0.3);
border-left: 1px solid rgba(180, 180, 180, 0.3);
border-right: 1px solid rgba(180, 180, 180, 0.3);
display: flex;
align-items: center;
padding: 0 16px;
}
.img-box {
height: calc(500px - 40px);
width: 100%;
border: 1px solid rgba(180, 180, 180, 0.3);
overflow: hidden;
position: relative;
.img-mask {
position: absolute;
box-sizing: border-box;
background-color: pink;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: 0 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
</style>
yarn.lock
View file @ ba61ea12
...@@ -2907,7 +2907,7 @@ duplexer@^0.1.2: ...@@ -2907,7 +2907,7 @@ duplexer@^0.1.2:
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
echarts@^5.3.2: echarts@^5.4.1:
version "5.4.1" version "5.4.1"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.1.tgz#d7f65a584d78beff62568d878b16151b3381811c" resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.1.tgz#d7f65a584d78beff62568d878b16151b3381811c"
integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ== integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment