feat: bbs新增商城页面初版
This commit is contained in:
@@ -35,6 +35,12 @@
|
||||
</el-icon>
|
||||
<span>排行榜</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="7" :route="{ path: '/money' }">
|
||||
<el-icon>
|
||||
<ShoppingCart />
|
||||
</el-icon>
|
||||
<span>商城(即将上线)</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -117,7 +117,15 @@ const router = createRouter({
|
||||
path:"/money",
|
||||
component: () => import("../views/money/Index.vue"),
|
||||
meta: {
|
||||
title: "钱钱",
|
||||
title: "钱钱排行榜",
|
||||
},
|
||||
},
|
||||
{
|
||||
name:"shop",
|
||||
path:"/shop",
|
||||
component: () => import("../views/shop/Index.vue"),
|
||||
meta: {
|
||||
title: "商城",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
74
Yi.Bbs.Vue3/src/views/shop/Index.vue
Normal file
74
Yi.Bbs.Vue3/src/views/shop/Index.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="title">
|
||||
意社区-商城
|
||||
</div>
|
||||
<div class="header">
|
||||
<span >你的钱钱
|
||||
<el-tooltip effect="dark" content="社区通用货币,(来源:通过社区活动获取)" placement="top-start">
|
||||
<el-icon><InfoFilled/></el-icon>
|
||||
</el-tooltip>
|
||||
:50</span>
|
||||
|
||||
|
||||
<span>你的价值
|
||||
<el-tooltip effect="dark" content="数字藏品账号价值,(来源:通过社区小程序数字藏品获取)" placement="top-start">
|
||||
<el-icon><InfoFilled/></el-icon>
|
||||
</el-tooltip>
|
||||
:70</span>
|
||||
|
||||
<span> 你的积分
|
||||
<el-tooltip effect="dark" content="邀请码积分,(来源:通过社区小程序个人中心邀请获取)" placement="top-start">
|
||||
<el-icon><InfoFilled/></el-icon>
|
||||
</el-tooltip>
|
||||
:40</span>
|
||||
</div>
|
||||
|
||||
<div class="shop">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="6" v-for="i in 10">
|
||||
<ShopCard/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<style scoped>
|
||||
.header span {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
width: 60%;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.shop {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import ShopCard from "./components/ShopCard.vue";
|
||||
</script>
|
||||
29
Yi.Bbs.Vue3/src/views/shop/components/ShopCard.vue
Normal file
29
Yi.Bbs.Vue3/src/views/shop/components/ShopCard.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<el-card shadow="hover">
|
||||
<template #header>商品-物品A</template>
|
||||
<img
|
||||
src="https://ccnetcore.com/prod-api/wwwroot/logo.png"
|
||||
style="width: 100%"
|
||||
alt=""/>
|
||||
<ul>
|
||||
<li>所需钱钱(扣除):666</li>
|
||||
<li>所需价值(拥有):777</li>
|
||||
<li>所需积分(拥有):888</li>
|
||||
<li>限制数量:1</li>
|
||||
</ul>
|
||||
<el-divider />
|
||||
<div class="bottom">
|
||||
<el-button type="success">申请购买</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.bottom
|
||||
{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user