Vue3实战笔记（53）—奇怪+1，VUE3实战模拟股票大盘工作台

文章目录

前言
一、实战模拟股票大盘工作台
二、使用步骤
总结

前言

实战模拟股票大盘工作台

一、实战模拟股票大盘工作台

接上文，这两天封装好的组件直接应用,上源码：


<template><div class="smart_house pb-5"><v-row ><v-col cols="12" sm="6"><v-hover v-slot="{ isHovering, props }" ><v-card subtitle="中国软件日线图" title="K线图" class="elevation-10 ma-4" height="497" v-bind="props" :elevation="isHovering ? 24 : 6"><EChartsCandlestickReactive/></v-card></v-hover></v-col><v-col cols="12" sm="2"><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4 " style="color: red;" max-width="344" height="155" subtitle="上证指数" title="当前价"  v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:append><v-icon color="red" icon="mdi-cloud"></v-icon></template><v-card-text class="text-h3 text-md-center" style="color: red;" >3001</v-card-text></v-card></v-hover><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" style="color: red;" max-width="344" height="155" subtitle="上证指数" title="最高价"   v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:append><v-icon color="red" icon="mdi-barley"></v-icon></template><v-card-text class="text-h3 text-md-center" style="color: red;">3111</v-card-text></v-card></v-hover><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" style="color: green;" max-width="344" height="155" subtitle="上证指数" title="最低价 "  v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:prepend><v-avatar color="blue-darken-2"><v-img alt="John" src="@/assets/images/avatar_big.png"></v-img></v-avatar></template><template v-slot:append><v-icon color="green" icon="mdi-weather-night"></v-icon></template><v-card-text class="text-h3 text-md-center" style="color: green;">2999</v-card-text></v-card></v-hover></v-col><v-col cols="12" sm="4" ><v-hover v-slot="{ isHovering, props }"><v-card class="mx-4 ma-4" height="497" subtitle="中国软件持仓分析" title="饼图" v-bind="props" :elevation="isHovering ? 24 : 6"><EChartsPieBorderRadiusType/></v-card></v-hover></v-col></v-row><v-row><v-col cols="12" sm="12" ><v-hover v-slot="{ isHovering, props }"><v-card class="mx-4 ma-2 " height="590" subtitle="" title="k线图" v-bind="props" :elevation="isHovering ? 24 : 6"><EChartsCandlestickSh/></v-card></v-hover></v-col></v-row></div>
</template><script setup lang='ts' name="Home">import Navigation from "@/components/navigation/Navigation.vue"
import { reactive,ref } from "vue";
</script><style lang='scss' scoped>.smart_house {.camera_wrap {position: relative;border-radius: 6px;overflow: hidden;height: 365px;.label {max-width: 112px;line-height: 25px;padding: 0 6px;background: rgba(71, 69, 70, 0.2);position: absolute;left: 16px;top: 16px;color: rgba(255, 255, 255, 0.8);border-radius: 2px;span {display: inline-block;width: 10px;height: 10px;background: red;border-radius: 5px;}}.label.lk {left: auto;right: 16px;}}
}
.isMobile {.px-sm-3 {padding-right: 12px !important;padding-left: 12px !important;}.py-sm-1 {padding-top: 4px !important;padding-bottom: 4px !important;}.py1_no {padding-top: 0 !important;padding-bottom: 0 !important;}.sm_item_ {padding: 16px 12px 0 12px !important;}.sm_pt_1 {padding-top: 4px !important;}.music_card {// padding: ;.zjbg {display: none;}}
}
</style>

二、使用步骤

路由配置：

  {path:'/',component:Layout,redirect: 'work',children: [{path: 'work',component: () => import('@/views/Work.vue'),name: 'work',meta: { title: '工作台'}}]}