hookehuyr

✨ feat(幼儿园概况): 样式结构调整

<template>
<div class=""></div>
<div class="all-book-page content-bg">
<div class="modify-top"></div>
<div class="belong-school">
<van-image round width="2rem" height="2rem" lazy-load src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcff89d3955421a988f983d312e970e4f07e08045b33c0505e52c65bb63ac35a9" style="vertical-align: text-bottom;" >
<template v-slot:error>加载失败</template>
</van-image>
<p class="title">杨浦民办科技幼稚园</p>
</div>
<div class="summary">
<div class="ding left"></div>
<div class="wrapper">
<div class="content-box" style="">
<van-row class="van-hairline--bottom">
<van-col span="12" class="van-hairline--right">
<div class="text-box"><span class="text">视频上传</span>&nbsp;24<span style="color: #888888;">/30</span></div>
</van-col>
<van-col span="12">
<div class="text-box"><span class="text">作品总数</span>&nbsp;436</div>
</van-col>
</van-row>
<van-row>
<van-col span="12" class="van-hairline--right">
<div class="text-box"><span class="text">捐书金额</span>&nbsp¥ 235</div>
</van-col>
<van-col span="12">
<div class="text-box"><span class="text">参与人数</span>&nbsp;876</div>
</van-col>
</van-row>
</div>
</div>
<div class="ding right"></div>
</div>
<div class="book-list">
<div class="header van-hairline--bottom">
<van-row>
<van-col span="8" class="left">
<span class="text" style="border-bottom: 2px solid #F9D95C;">所有书籍</span>
</van-col>
<van-col span="8"></van-col>
<van-col span="8" class="right">
<van-icon :name="icon_book" size="0.8rem" style="vertical-align: middle;" />
&nbsp;<span style="vertical-align: middle;">共15种</span>
</van-col>
</van-row>
</div>
<template v-for="(item, key) in items" :key="key">
<book-card :item="item" @on-click="onClick(item)"></book-card>
</template>
</div>
<div style="height: 1rem;"></div>
<shortcut-fixed @on-click="gotoMe()"></shortcut-fixed>
</div>
</template>
<script setup>
import icon_book from '@images/shu@2x.png'
import MyButton from '@/components/MyButton/index.vue'
import BookCard from '@/components/BookCard/index.vue'
import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
......@@ -10,9 +66,32 @@ import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
// 自定义按钮颜色样式
const styleObject = reactive({
backgroundColor: '#F4675A',
color: '#FFFFFF',
borderColor: '#F4675A'
})
const items = reactive([])
const onClick = (item) => {
// 调整书籍详情页
$router.push({
path: '/client/bookDetail',
query: {
id: item.id
}
});
}
const gotoMe = () => {
console.warn('跳转我的地址');
}
onMounted(() => {
for (let index = 0; index < 20; index++) {
items.push({
id: index,
avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4bb07576e7df209c1f91dd67e0c2671bd5704366605bc720b56d20b38602c2b7'
})
}
})
</script>
......@@ -36,5 +115,75 @@ export default {
</script>
<style lang="less" scoped>
@import url('@css/content-bg.less');
.all-book-page {
.belong-school {
padding: 1.5rem;
padding-bottom: 0;
.title {
color: #222222;
display: inline-block;
vertical-align: super;
margin-left: 1rem;
}
}
.summary {
position: relative;
.wrapper {
position: relative;
z-index: 100;
.content-box {
margin: 1rem;
background-color: #FFFFFF;
border-radius: 8px;
text-align: center;
color: #713610;
.text-box {
padding: 1.5rem 1rem;
.text {
color: #222222; border-bottom: 2px solid #F9D95C; font-size: 0.85rem;
}
}
}
}
}
.book-list {
margin: 1rem;
padding-top: 1rem;
border-radius: 10px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
.header {
padding: 1rem 0;
margin: 0 1rem;
text-align: center;
vertical-align: middle;
.left {
color: #222222;
font-size: 1.15rem;
}
.right {
color: #888888;
font-size: 0.9rem;
}
}
}
.ding {
z-index: 110;
position: absolute;
top: 7.5rem;
width: 1rem;
height: 3rem;
background-image: url('@images/ding03@2x.png');
background-size: contain;
background-repeat: no-repeat;
&.left {
left: 8rem;
}
&.right {
right: 8rem;
}
}
}
</style>
\ No newline at end of file
......