9 changed files with 899 additions and 626 deletions
@ -0,0 +1,78 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-13 14:36:07 |
|||
@ 备注: App表单头部控制 |
|||
--> |
|||
<script lang='ts' setup> |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先 |
|||
hideKey?: string[] // 设置了showKey时，hideKey无效 |
|||
customerformid?: number | string, |
|||
}>(), |
|||
{ |
|||
showKey: () => { |
|||
return [] |
|||
}, |
|||
hideKey: () => { |
|||
return [] |
|||
} |
|||
} |
|||
) |
|||
const emits = defineEmits<{(e: 'click', value: string): void}>(); |
|||
const btnList = computed(() => { |
|||
const list = [ |
|||
{ icon: 'del',iconFont:"", label: '清空', key: 1 }, |
|||
{ icon: 'eye',iconFont:"", label: '预览', key: 2 }, |
|||
{ icon: 'json',iconFont:"", label: '生成脚本预览', key: 3 }, |
|||
// { icon: 'vue', label: '导出vue文件', key: 4 }, |
|||
{ icon: 'save',iconFont:"fa-save", label: '保存', key: 5 }, |
|||
{ icon: 'branch',iconFont:"fa-code-fork", label: '另存为新版', key: 4 }, |
|||
// { icon: 'close',iconFont:"fa-close", label: '关闭', key: 6 } |
|||
] |
|||
if (props.showKey?.length) { |
|||
// 按照指定的key显示 |
|||
return list.filter((item: any) => { |
|||
return props.showKey.includes(item.key) |
|||
}) |
|||
} else if (props.hideKey?.length) { |
|||
// 按照指定的key隐藏 |
|||
return list.filter((item: any) => { |
|||
return !props.hideKey.includes(item.key) |
|||
}) |
|||
} else { |
|||
return list // 否则显示全部 |
|||
} |
|||
}) |
|||
const btnClick = (type: string) => { |
|||
emits('click', type) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="main-head-tools"> |
|||
<div>{{props.customerformid}}</div> |
|||
<div> |
|||
<span v-for="item in btnList"> |
|||
<el-button |
|||
link |
|||
v-if="(item.icon != 'branch') || (item.icon == 'branch' && (props.customerformid !=''))" |
|||
@click="btnClick(item.icon)" |
|||
:key="item.icon" |
|||
:type="item.key==6?'danger':item.key==5?'success':item.key==4?'warning':'primary'" |
|||
> |
|||
<i v-if="item.iconFont==''" :class="['icon-' + item.icon]" ></i><i v-if="item.iconFont!=''" :class="['fa ' + item.iconFont]" ></i>{{ item.label }} |
|||
</el-button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.main-head-tools{ |
|||
line-height: 26px; |
|||
border-bottom: 2px solid #e4e7ed; |
|||
padding: 6px 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
} |
|||
</style> |
|||
@ -1,250 +1,146 @@ |
|||
<script lang="ts"> |
|||
export default { name: "Dashboard" }; |
|||
</script> |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; //引入图形界面 |
|||
|
|||
<script setup lang="ts"> |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|||
|
|||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BarChart from "./components/BarChart.vue"; |
|||
import PieChart from "./components/PieChart.vue"; |
|||
import RadarChart from "./components/RadarChart.vue"; |
|||
|
|||
import { orgInfo } from '@/api/displayboardapi/types' |
|||
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' |
|||
|
|||
import UserInfo from "@/views/dashboard/components/userinfo.vue"; |
|||
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; |
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
|||
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
|||
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
|||
import Application from "@/views/dashboard/components/application.vue"; |
|||
import HostNews from "@/views/dashboard/components/hostnews.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
const orgListCont = ref<orgInfo[]>([]) |
|||
const educationOrgId = ref<number>(309) |
|||
const masterBody = ref<any>(null) |
|||
const drawerWidht = ref<any>() |
|||
/** |
|||
* 获取行政组织 |
|||
*/ |
|||
function getOrgList(){ |
|||
getOrgChiled({id:313}) |
|||
.then(( {data} )=>{ |
|||
console.log("获取行政组织-2-->",data) |
|||
orgListCont.value = data.list |
|||
educationOrgId.value = data.current |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const orgAllYears = ref<any>() //当前年 |
|||
|
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
|
|||
const date: Date = new Date(); |
|||
|
|||
const greetings = computed(() => { |
|||
if (date.getHours() >= 6 && date.getHours() < 8) { |
|||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
|||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
|||
return "上午好🌞！"; |
|||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
|||
return "下午好☕！"; |
|||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
|||
return "晚上好🌃！"; |
|||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
|||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|||
} |
|||
}); |
|||
|
|||
const duration = 5000; |
|||
|
|||
// 收入金额 |
|||
const amount = ref(0); |
|||
const amountOutput = useTransition(amount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
amount.value = 2000; |
|||
|
|||
// 访问数 |
|||
const visitCount = ref(0); |
|||
const visitCountOutput = useTransition(visitCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
visitCount.value = 2000; |
|||
|
|||
//消息数 |
|||
const messageCount = ref(0); |
|||
const messageCountOutput = useTransition(messageCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
messageCount.value = 2000; |
|||
|
|||
// 订单数 |
|||
const orderCount = ref(0); |
|||
const orderCountOutput = useTransition(orderCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
orderCount.value = 2000; |
|||
</script> |
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
|
|||
drawerWidht.value = masterBody.value?.clientWidth |
|||
getOrgList(); |
|||
// console.log("热门新闻----100---->",drawerWidht.value) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<!-- github角标 --> |
|||
|
|||
|
|||
<!-- 用户信息 --> |
|||
<el-row class="mb-8"> |
|||
<el-card class="w-full"> |
|||
<div class="flex justify-between flex-wrap"> |
|||
<div class="flex items-center"> |
|||
<img |
|||
class="user-avatar" |
|||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|||
/> |
|||
<span class="ml-[10px] text-[16px]"> |
|||
{{ userStore.nickname }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="leading-[40px]"> |
|||
{{ greetings }} |
|||
</div> |
|||
|
|||
<div v-if="false" class="space-x-2 flex items-center" > |
|||
<el-link |
|||
target="_blank" |
|||
type="danger" |
|||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|||
>官方0到1教程</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="success" |
|||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
|||
>Gitee源码</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="primary" |
|||
href="https://github.com/youlaitech/vue3-element-admin" |
|||
>GitHub源码 |
|||
</el-link> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-row> |
|||
|
|||
<!-- 数据卡片 --> |
|||
<el-row :gutter="40" class="mb-4"> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="uv" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(visitCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<!--消息数--> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="message" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(messageCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="money" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(amountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="shopping" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(orderCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- Echarts 图表 --> |
|||
<el-row :gutter="40"> |
|||
<el-col :sm="24" :lg="8" class="mb-4"> |
|||
<BarChart |
|||
id="barChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<PieChart |
|||
id="pieChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<RadarChart |
|||
id="radarChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div ref="masterBody" class="app_container"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<HostNews v-model:drawer-widht="drawerWidht" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<SanLianpIng /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app_container{ |
|||
padding: 10px 20px 0px 20px; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-container { |
|||
position: relative; |
|||
padding: 24px; |
|||
|
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.github-corner { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
border: 0; |
|||
} |
|||
|
|||
.data-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 20px; |
|||
font-weight: bold; |
|||
color: var(--el-text-color-regular); |
|||
background: var(--el-bg-color-overlay); |
|||
border-color: var(--el-border-color); |
|||
box-shadow: var(--el-box-shadow-dark); |
|||
} |
|||
|
|||
.svg-icon { |
|||
fill: currentcolor !important; |
|||
} |
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,146 +0,0 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; //引入图形界面 |
|||
|
|||
import { useUserStore } from "@/store/modules/user"; |
|||
|
|||
|
|||
import { orgInfo } from '@/api/displayboardapi/types' |
|||
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' |
|||
|
|||
import UserInfo from "@/views/dashboard/components/userinfo.vue"; |
|||
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; |
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
|||
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
|||
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
|||
import Application from "@/views/dashboard/components/application.vue"; |
|||
import HostNews from "@/views/dashboard/components/hostnews.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
const orgListCont = ref<orgInfo[]>([]) |
|||
const educationOrgId = ref<number>(309) |
|||
const masterBody = ref<any>(null) |
|||
const drawerWidht = ref<any>() |
|||
/** |
|||
* 获取行政组织 |
|||
*/ |
|||
function getOrgList(){ |
|||
getOrgChiled({id:313}) |
|||
.then(( {data} )=>{ |
|||
console.log("获取行政组织-2-->",data) |
|||
orgListCont.value = data.list |
|||
educationOrgId.value = data.current |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const orgAllYears = ref<any>() //当前年 |
|||
|
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
|
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
|
|||
drawerWidht.value = masterBody.value?.clientWidth |
|||
getOrgList(); |
|||
// console.log("热门新闻----100---->",drawerWidht.value) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div ref="masterBody" class="app_container"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<HostNews v-model:drawer-widht="drawerWidht" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<SanLianpIng /> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app_container{ |
|||
padding: 10px 20px 0px 20px; |
|||
height: calc(100vh - 90px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,250 @@ |
|||
<script lang="ts"> |
|||
export default { name: "Dashboard" }; |
|||
</script> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|||
|
|||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import BarChart from "./components/BarChart.vue"; |
|||
import PieChart from "./components/PieChart.vue"; |
|||
import RadarChart from "./components/RadarChart.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
|
|||
const date: Date = new Date(); |
|||
|
|||
const greetings = computed(() => { |
|||
if (date.getHours() >= 6 && date.getHours() < 8) { |
|||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
|||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
|||
return "上午好🌞！"; |
|||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
|||
return "下午好☕！"; |
|||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
|||
return "晚上好🌃！"; |
|||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
|||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|||
} |
|||
}); |
|||
|
|||
const duration = 5000; |
|||
|
|||
// 收入金额 |
|||
const amount = ref(0); |
|||
const amountOutput = useTransition(amount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
amount.value = 2000; |
|||
|
|||
// 访问数 |
|||
const visitCount = ref(0); |
|||
const visitCountOutput = useTransition(visitCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
visitCount.value = 2000; |
|||
|
|||
//消息数 |
|||
const messageCount = ref(0); |
|||
const messageCountOutput = useTransition(messageCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
messageCount.value = 2000; |
|||
|
|||
// 订单数 |
|||
const orderCount = ref(0); |
|||
const orderCountOutput = useTransition(orderCount, { |
|||
duration: duration, |
|||
transition: TransitionPresets.easeOutExpo, |
|||
}); |
|||
orderCount.value = 2000; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<!-- github角标 --> |
|||
|
|||
|
|||
<!-- 用户信息 --> |
|||
<el-row class="mb-8"> |
|||
<el-card class="w-full"> |
|||
<div class="flex justify-between flex-wrap"> |
|||
<div class="flex items-center"> |
|||
<img |
|||
class="user-avatar" |
|||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|||
/> |
|||
<span class="ml-[10px] text-[16px]"> |
|||
{{ userStore.nickname }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="leading-[40px]"> |
|||
{{ greetings }} |
|||
</div> |
|||
|
|||
<div v-if="false" class="space-x-2 flex items-center" > |
|||
<el-link |
|||
target="_blank" |
|||
type="danger" |
|||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|||
>官方0到1教程</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="success" |
|||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
|||
>Gitee源码</el-link |
|||
> |
|||
<el-divider direction="vertical" /> |
|||
<el-link |
|||
target="_blank" |
|||
type="primary" |
|||
href="https://github.com/youlaitech/vue3-element-admin" |
|||
>GitHub源码 |
|||
</el-link> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-row> |
|||
|
|||
<!-- 数据卡片 --> |
|||
<el-row :gutter="40" class="mb-4"> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="uv" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(visitCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<!--消息数--> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="message" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(messageCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="money" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(amountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
|||
<div class="data-box"> |
|||
<div |
|||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|||
> |
|||
<svg-icon icon-class="shopping" size="3em" /> |
|||
</div> |
|||
<div class="flex flex-col space-y-3"> |
|||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|||
<div class="text-lg"> |
|||
{{ Math.round(orderCountOutput) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- Echarts 图表 --> |
|||
<el-row :gutter="40"> |
|||
<el-col :sm="24" :lg="8" class="mb-4"> |
|||
<BarChart |
|||
id="barChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<PieChart |
|||
id="pieChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
|
|||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|||
<RadarChart |
|||
id="radarChart" |
|||
height="400px" |
|||
width="100%" |
|||
class="bg-[var(--el-bg-color-overlay)]" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-container { |
|||
position: relative; |
|||
padding: 24px; |
|||
|
|||
.user-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.github-corner { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
border: 0; |
|||
} |
|||
|
|||
.data-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 20px; |
|||
font-weight: bold; |
|||
color: var(--el-text-color-regular); |
|||
background: var(--el-bg-color-overlay); |
|||
border-color: var(--el-border-color); |
|||
box-shadow: var(--el-box-shadow-dark); |
|||
} |
|||
|
|||
.svg-icon { |
|||
fill: currentcolor !important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,252 +1,56 @@ |
|||
<!-- |
|||
@ 作者: 袁纪菲 |
|||
@ 时间: 2024.4.16 |
|||
@ 备注: 应用管理 |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-13 16:10:18 |
|||
@ 备注: webservice服务 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import editpage from './editpage.vue'; |
|||
import { ref , onMounted } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
//页面跳转 |
|||
const router = useRouter(); |
|||
const goToCreatePage = () => { |
|||
try { |
|||
router.push({ name: 'create' }); |
|||
} catch (error) { |
|||
console.error("导航到创建页面时发生错误:", error); |
|||
} |
|||
}; |
|||
const dialogRefedit = ref(false); |
|||
interface cardDatas { |
|||
id: number; |
|||
name: string; |
|||
icon: string; |
|||
} |
|||
//初始化应用卡片数据 |
|||
const cardData = ref<cardDatas[]>([]); |
|||
const emits = defineEmits(["update:Visible", "data"]); |
|||
<script lang='ts' setup> |
|||
const message = ref(''); |
|||
const ws = ref(null); |
|||
|
|||
onMounted(() => { |
|||
if (!cardData.value.length) { |
|||
for (let i = 0; i < 9; i++) { |
|||
cardData.value.push({ |
|||
id: i, |
|||
name: '标题' + i, |
|||
icon: 'https://img.zcool.cn/community/01f3fb5a66a75ea80120a123a9f582.jpg@2o.jpg' |
|||
}); |
|||
} |
|||
} |
|||
connect(); |
|||
}); |
|||
//编辑应用 |
|||
const showEditPage = (index: number) => { |
|||
dialogRefedit.value = true; |
|||
editpage.value.cardData = cardData.value[index]; |
|||
editpage.value.onSubmit = handleEdit; |
|||
}; |
|||
//编辑应用数据的接受与处理 |
|||
const handleEdit = (newCard: cardDatas) => { |
|||
cardData.value.splice(0, 1, newCard); |
|||
}; |
|||
//删除卡片 |
|||
const deleteCard = (index: number) => { |
|||
cardData.value.splice(index, 1); |
|||
}; |
|||
</script> |
|||
<template> |
|||
|
|||
<editpage v-model:Visible="dialogRefedit" @data="handleEdit" /> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-container> |
|||
<el-main class="layout-content"> |
|||
<el-header class="content-header"> |
|||
<el-button class="create-btn" @click="goToCreatePage"> |
|||
<el-icon><Plus /></el-icon> |
|||
新建应用 |
|||
</el-button> |
|||
</el-header> |
|||
<el-main> |
|||
<el-scrollbar class="scrollbar"> |
|||
<div class="xiangying"> |
|||
<el-col v-for="(card) in cardData" :key="card.id"> |
|||
<el-card class="cardpattern" shadow="hover" > |
|||
<div class="button"> |
|||
<img :src="card.icon" class="picture" /> |
|||
<span>自定义卡片</span> |
|||
<el-icon class="star"> |
|||
<Star /> |
|||
</el-icon> |
|||
<el-dropdown class="xiala" trigger="click"> |
|||
<el-icon> |
|||
<MoreFilled /> |
|||
</el-icon> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click = "() => showEditPage">编辑应用</el-dropdown-item> |
|||
<el-dropdown-item @click = "() => deleteCard">删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</div> |
|||
<div class="cardhead"> |
|||
<span>{{ card.name }}</span> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-main> |
|||
</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.common-layout { |
|||
width: 100%; |
|||
height: 100%; |
|||
.el-container { |
|||
height: 100%; |
|||
/* 不折叠的时候宽度是200px，折叠的时候宽度自适应 */ |
|||
} |
|||
onUnmounted(() => { |
|||
if (ws.value) { |
|||
ws.value.close(); |
|||
} |
|||
svg { |
|||
width: 1.5em; |
|||
margin-right: 5px; |
|||
} |
|||
.el-menu-vertical-demo:not(.el-menu--collapse) { |
|||
width: 200px; |
|||
min-height: 400px; |
|||
} |
|||
.el-aside { |
|||
width: auto; |
|||
} |
|||
.el-menu-vertical-demo { |
|||
border-right: none; |
|||
margin-top: 0; |
|||
height: 100%; |
|||
background-color: #586177; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item { |
|||
color: #ffffff; |
|||
} |
|||
/* 侧边栏标题 */ |
|||
.side-header { |
|||
height: 64px; |
|||
padding: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
/* 右侧上方标题 */ |
|||
.up-header { |
|||
display: flex; |
|||
align-items : center; |
|||
justify-content:left; |
|||
background-color: #fff; |
|||
padding: 0; |
|||
} |
|||
/* 缩放侧边栏按钮 */ |
|||
.trigger { |
|||
font-size: 18px; |
|||
line-height: 64px; |
|||
padding: 0 24px; |
|||
cursor: pointer; |
|||
} |
|||
.el-main { |
|||
overflow-y: auto; |
|||
padding-right: 0; /* 取消内外边距以免影响滚动区域 */ |
|||
} |
|||
/* 内容框 */ |
|||
.layout-content{ |
|||
padding: 15px; |
|||
background: #f5f5f5; |
|||
min-height: 280px; |
|||
} |
|||
/* 新建按钮框 */ |
|||
.content-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
text-align: right; |
|||
font-size: 12px; |
|||
height: 40px; |
|||
} |
|||
/* 新建按钮 */ |
|||
.create-btn { |
|||
margin-right: 10px; |
|||
background-color: #1090ff; |
|||
color: #ffffff; |
|||
} |
|||
/* 卡片整体所在区域 */ |
|||
.scrollbar{ |
|||
height: 700px; |
|||
overflow-y: auto; /* 自动显示垂直滚动条 */ |
|||
margin-right: 10px; |
|||
box-sizing: border-box; /* 保证高度计算包含内边距和边框 */ |
|||
}); |
|||
|
|||
/* 当内容不够一屏时，禁用滚动条 */ |
|||
&::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
} |
|||
/* 内容部分卡片响应式 */ |
|||
.xiangying { |
|||
display: grid; |
|||
grid-auto-rows: minmax(160px, auto); /* 或者指定最大高度 */ |
|||
grid-gap: 1px; |
|||
grid-template-columns: repeat(auto-fit, 230px); |
|||
overflow-y: auto; /* 添加此行以允许卡片区域内部内容滚动 */ |
|||
} |
|||
/* 卡片 */ |
|||
.cardpattern { |
|||
padding: 0px; |
|||
margin-bottom: 10px; |
|||
width: 220px; |
|||
height: 150px; |
|||
transition: all 0.3s ease; |
|||
} |
|||
function connect() { |
|||
ws.value = new WebSocket('ws://120.0.0.1:14250'); |
|||
|
|||
/* 卡片标题 */ |
|||
.cardhead { |
|||
margin-top: 50px; |
|||
font-size: 18px; |
|||
color: #000000; |
|||
font-weight: 500; |
|||
text-align: left; |
|||
font-family: PingFangSC-Regular; |
|||
line-height: 20px; |
|||
} |
|||
/* 收藏按钮与下拉框区域 */ |
|||
.button { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 3px; |
|||
} |
|||
/* 收藏按钮 */ |
|||
.star { |
|||
font-size: 20px; |
|||
margin-right: -5px; |
|||
} |
|||
ws.value.onopen = function(event) { |
|||
console.log('WebSocket 连接已打开', event); |
|||
}; |
|||
|
|||
ws.value.onerror = function(error) { |
|||
console.error('WebSocket 出错', error); |
|||
}; |
|||
|
|||
/* 占位元素 */ |
|||
.placeholder { |
|||
height:14px; |
|||
/* 设置为图标按钮组的高度 */ |
|||
width:100%; |
|||
/* 设置为图标按钮组的宽度 */ |
|||
visibility: hidden; |
|||
/* 或者 opacity: 0; 保证不会影响布局但不可见 */ |
|||
pointer-events: none; |
|||
/* 防止此元素捕获鼠标事件 */ |
|||
ws.value.onmessage = function(event) { |
|||
console.log('收到消息', event.data); |
|||
}; |
|||
|
|||
ws.value.onclose = function() { |
|||
console.log('WebSocket 连接已关闭'); |
|||
}; |
|||
} |
|||
/* 图片 */ |
|||
.picture { |
|||
width: 3cap; |
|||
margin: 1px; |
|||
|
|||
function sendMessage() { |
|||
if (ws.value && ws.value.readyState === WebSocket.OPEN) { |
|||
ws.value.send(message.value); |
|||
} else { |
|||
console.error('WebSocket 连接未打开'); |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<input v-model="message" placeholder="输入消息" /> |
|||
<button @click="sendMessage">发送</button> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,252 @@ |
|||
<!-- |
|||
@ 作者: 袁纪菲 |
|||
@ 时间: 2024.4.16 |
|||
@ 备注: 应用管理 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import editpage from './editpage.vue'; |
|||
import { ref , onMounted } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
//页面跳转 |
|||
const router = useRouter(); |
|||
const goToCreatePage = () => { |
|||
try { |
|||
router.push({ name: 'create' }); |
|||
} catch (error) { |
|||
console.error("导航到创建页面时发生错误:", error); |
|||
} |
|||
}; |
|||
const dialogRefedit = ref(false); |
|||
interface cardDatas { |
|||
id: number; |
|||
name: string; |
|||
icon: string; |
|||
} |
|||
//初始化应用卡片数据 |
|||
const cardData = ref<cardDatas[]>([]); |
|||
const emits = defineEmits(["update:Visible", "data"]); |
|||
|
|||
onMounted(() => { |
|||
if (!cardData.value.length) { |
|||
for (let i = 0; i < 9; i++) { |
|||
cardData.value.push({ |
|||
id: i, |
|||
name: '标题' + i, |
|||
icon: 'https://img.zcool.cn/community/01f3fb5a66a75ea80120a123a9f582.jpg@2o.jpg' |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
//编辑应用 |
|||
const showEditPage = (index: number) => { |
|||
dialogRefedit.value = true; |
|||
editpage.value.cardData = cardData.value[index]; |
|||
editpage.value.onSubmit = handleEdit; |
|||
}; |
|||
//编辑应用数据的接受与处理 |
|||
const handleEdit = (newCard: cardDatas) => { |
|||
cardData.value.splice(0, 1, newCard); |
|||
}; |
|||
//删除卡片 |
|||
const deleteCard = (index: number) => { |
|||
cardData.value.splice(index, 1); |
|||
}; |
|||
</script> |
|||
<template> |
|||
|
|||
<editpage v-model:Visible="dialogRefedit" @data="handleEdit" /> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-container> |
|||
<el-main class="layout-content"> |
|||
<el-header class="content-header"> |
|||
<el-button class="create-btn" @click="goToCreatePage"> |
|||
<el-icon><Plus /></el-icon> |
|||
新建应用 |
|||
</el-button> |
|||
</el-header> |
|||
<el-main> |
|||
<el-scrollbar class="scrollbar"> |
|||
<div class="xiangying"> |
|||
<el-col v-for="(card) in cardData" :key="card.id"> |
|||
<el-card class="cardpattern" shadow="hover" > |
|||
<div class="button"> |
|||
<img :src="card.icon" class="picture" /> |
|||
<span>自定义卡片</span> |
|||
<el-icon class="star"> |
|||
<Star /> |
|||
</el-icon> |
|||
<el-dropdown class="xiala" trigger="click"> |
|||
<el-icon> |
|||
<MoreFilled /> |
|||
</el-icon> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click = "() => showEditPage">编辑应用</el-dropdown-item> |
|||
<el-dropdown-item @click = "() => deleteCard">删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</div> |
|||
<div class="cardhead"> |
|||
<span>{{ card.name }}</span> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-main> |
|||
</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.common-layout { |
|||
width: 100%; |
|||
height: 100%; |
|||
.el-container { |
|||
height: 100%; |
|||
/* 不折叠的时候宽度是200px，折叠的时候宽度自适应 */ |
|||
} |
|||
} |
|||
svg { |
|||
width: 1.5em; |
|||
margin-right: 5px; |
|||
} |
|||
.el-menu-vertical-demo:not(.el-menu--collapse) { |
|||
width: 200px; |
|||
min-height: 400px; |
|||
} |
|||
.el-aside { |
|||
width: auto; |
|||
} |
|||
.el-menu-vertical-demo { |
|||
border-right: none; |
|||
margin-top: 0; |
|||
height: 100%; |
|||
background-color: #586177; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item { |
|||
color: #ffffff; |
|||
} |
|||
/* 侧边栏标题 */ |
|||
.side-header { |
|||
height: 64px; |
|||
padding: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
/* 右侧上方标题 */ |
|||
.up-header { |
|||
display: flex; |
|||
align-items : center; |
|||
justify-content:left; |
|||
background-color: #fff; |
|||
padding: 0; |
|||
} |
|||
/* 缩放侧边栏按钮 */ |
|||
.trigger { |
|||
font-size: 18px; |
|||
line-height: 64px; |
|||
padding: 0 24px; |
|||
cursor: pointer; |
|||
} |
|||
.el-main { |
|||
overflow-y: auto; |
|||
padding-right: 0; /* 取消内外边距以免影响滚动区域 */ |
|||
} |
|||
/* 内容框 */ |
|||
.layout-content{ |
|||
padding: 15px; |
|||
background: #f5f5f5; |
|||
min-height: 280px; |
|||
} |
|||
/* 新建按钮框 */ |
|||
.content-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
text-align: right; |
|||
font-size: 12px; |
|||
height: 40px; |
|||
} |
|||
/* 新建按钮 */ |
|||
.create-btn { |
|||
margin-right: 10px; |
|||
background-color: #1090ff; |
|||
color: #ffffff; |
|||
} |
|||
/* 卡片整体所在区域 */ |
|||
.scrollbar{ |
|||
height: 700px; |
|||
overflow-y: auto; /* 自动显示垂直滚动条 */ |
|||
margin-right: 10px; |
|||
box-sizing: border-box; /* 保证高度计算包含内边距和边框 */ |
|||
|
|||
/* 当内容不够一屏时，禁用滚动条 */ |
|||
&::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
} |
|||
/* 内容部分卡片响应式 */ |
|||
.xiangying { |
|||
display: grid; |
|||
grid-auto-rows: minmax(160px, auto); /* 或者指定最大高度 */ |
|||
grid-gap: 1px; |
|||
grid-template-columns: repeat(auto-fit, 230px); |
|||
overflow-y: auto; /* 添加此行以允许卡片区域内部内容滚动 */ |
|||
} |
|||
/* 卡片 */ |
|||
.cardpattern { |
|||
padding: 0px; |
|||
margin-bottom: 10px; |
|||
width: 220px; |
|||
height: 150px; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
/* 卡片标题 */ |
|||
.cardhead { |
|||
margin-top: 50px; |
|||
font-size: 18px; |
|||
color: #000000; |
|||
font-weight: 500; |
|||
text-align: left; |
|||
font-family: PingFangSC-Regular; |
|||
line-height: 20px; |
|||
} |
|||
/* 收藏按钮与下拉框区域 */ |
|||
.button { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 3px; |
|||
} |
|||
/* 收藏按钮 */ |
|||
.star { |
|||
font-size: 20px; |
|||
margin-right: -5px; |
|||
} |
|||
|
|||
/* 占位元素 */ |
|||
.placeholder { |
|||
height:14px; |
|||
/* 设置为图标按钮组的高度 */ |
|||
width:100%; |
|||
/* 设置为图标按钮组的宽度 */ |
|||
visibility: hidden; |
|||
/* 或者 opacity: 0; 保证不会影响布局但不可见 */ |
|||
pointer-events: none; |
|||
/* 防止此元素捕获鼠标事件 */ |
|||
} |
|||
/* 图片 */ |
|||
.picture { |
|||
width: 3cap; |
|||
margin: 1px; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue