feat: 优化bbs前端样式
This commit is contained in:
@@ -22,7 +22,11 @@
|
|||||||
<el-icon><HelpFilled /></el-icon>
|
<el-icon><HelpFilled /></el-icon>
|
||||||
<span>大转盘</span>
|
<span>大转盘</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item index="5" :route="{path:'/activity/sign'}">
|
<el-menu-item index="5" :route="{path:'/activity/bank'}">
|
||||||
|
<el-icon><Sunrise /></el-icon>
|
||||||
|
<span>银行</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="6" :route="{path:'/activity/sign'}">
|
||||||
<el-icon><Sunrise /></el-icon>
|
<el-icon><Sunrise /></el-icon>
|
||||||
<span>娱乐城</span>
|
<span>娱乐城</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
|||||||
@@ -130,6 +130,14 @@ const router = createRouter({
|
|||||||
title: "大转盘",
|
title: "大转盘",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "bank",
|
||||||
|
path: "bank",
|
||||||
|
component: () => import("../views/bank/Index.vue"),
|
||||||
|
meta: {
|
||||||
|
title: "银行",
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
|
{ path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
|
||||||
|
|||||||
@@ -62,15 +62,16 @@
|
|||||||
:userInfo="discuss.user"
|
:userInfo="discuss.user"
|
||||||
></AvatarInfo>
|
></AvatarInfo>
|
||||||
<!-- :userInfo="{nick:'qwe'} -->
|
<!-- :userInfo="{nick:'qwe'} -->
|
||||||
<el-divider />
|
|
||||||
<h2>{{ discuss.title }}</h2>
|
<h2>{{ discuss.title }}</h2>
|
||||||
|
<h5 class="subtitle">{{discuss.introduction }}</h5>
|
||||||
<el-image
|
<el-image
|
||||||
:preview-src-list="[getUrl(discuss.cover)]"
|
:preview-src-list="[getUrl(discuss.cover)]"
|
||||||
v-if="discuss.cover"
|
v-if="discuss.cover"
|
||||||
:src="getUrl(discuss.cover)"
|
:src="getUrl(discuss.cover)"
|
||||||
style="width: 150px; height: 150px"
|
style="width: 150px; height: 150px"
|
||||||
/>
|
/>
|
||||||
|
<el-divider />
|
||||||
<ArticleContentInfo
|
<ArticleContentInfo
|
||||||
:code="discuss.content ?? ''"
|
:code="discuss.content ?? ''"
|
||||||
></ArticleContentInfo>
|
></ArticleContentInfo>
|
||||||
@@ -397,6 +398,13 @@ watch(
|
|||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.subtitle
|
||||||
|
{
|
||||||
|
color:#999AAA;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.article-box {
|
.article-box {
|
||||||
width: 1400px;
|
width: 1400px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
31
Yi.Bbs.Vue3/src/views/bank/Index.vue
Normal file
31
Yi.Bbs.Vue3/src/views/bank/Index.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bank-body">
|
||||||
|
<h2>小心谨慎选择银行机构,确保资金安全</h2>
|
||||||
|
<div>
|
||||||
|
<ExchangeRate/>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span=8 v-for="i in 10">
|
||||||
|
<BankCard ></BankCard>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import BankCard from "./components/BankCard.vue"
|
||||||
|
import ExchangeRate from "./components/ExchangeRate.vue"
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.bank-body
|
||||||
|
{
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
29
Yi.Bbs.Vue3/src/views/bank/components/BankCard.vue
Normal file
29
Yi.Bbs.Vue3/src/views/bank/components/BankCard.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
银行卡-32659854213658541
|
||||||
|
<p>当前余额:100钱钱</p>
|
||||||
|
<p>状态:存款中</p>
|
||||||
|
<p>剩余定期提款时间还剩: 2天12小时</p>
|
||||||
|
</div>
|
||||||
|
<div class="div-oper">
|
||||||
|
<el-button>存款</el-button><el-button>提款</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.card {
|
||||||
|
background-color: green;
|
||||||
|
height: 140px;
|
||||||
|
margin: 10px 0;
|
||||||
|
.card-body
|
||||||
|
{
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.div-oper {
|
||||||
|
background-color: aqua;
|
||||||
|
text-align: end;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
Yi.Bbs.Vue3/src/views/bank/components/ExchangeRate.vue
Normal file
16
Yi.Bbs.Vue3/src/views/bank/components/ExchangeRate.vue
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="rate">
|
||||||
|
银行利息汇率趋势图
|
||||||
|
</div>
|
||||||
|
<p>当前实时汇率:110%(可获取投入的百分之110%的本金)</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.rate
|
||||||
|
{
|
||||||
|
background-color: brown;
|
||||||
|
height: 100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user