Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bfeecbfe 1 parent 1d2314d3

✨ feat(客户端): 新增选择爱心书籍页面

Inline Side-by-side
Showing 7 changed files with 240 additions and 1 deletions
......@@ -6,7 +6,7 @@
<title></title>
</head>
<body>
<div id="app"></div>
<div id="app" style="height: auto;"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
......
<template>
<div class="book-item van-hairline--bottom" @click="handle">
<van-row>
<van-col span="6">
<van-image
width="5rem"
height="5rem"
:src="item.avatar"
style="text-align: center;"
/>
</van-col>
<van-col span="18" style="padding-left: 1rem;">
<p style="font-size: 1.15rem; color: #222222; font-weight: bold;">逃家小兔绘本</p>
<div style="font-size: 0.85rem; color: #999999; margin: 0.5rem 0;" class="van-multi-ellipsis--l2">
从前有一只小兔子，总是想要离家出走。有一天，他对妈妈说如果有大灰狼怎么办，不要把门打开
</div>
<div style="font-size: 0.85rem; color: #999999; margin-top: 0.5rem;">
<van-icon :name="icon_video" />
54个作品
</div>
</van-col>
</van-row>
</div>
</template>
<script setup>
import icon_video from '@images/video.png'
import { ref, reactive, onMounted } from 'vue'
const props = defineProps({
item: Object
})
const emit = defineEmits(['on-click']);
const handle = () => {
emit('on-click', '')
}
onMounted(() => {
})
</script>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.book-item {
margin: 1rem;
padding: 1rem;
}
</style>
\ No newline at end of file
......@@ -23,6 +23,14 @@ export default [{
},
children: []
}, {
path: '/client/chooseBook',
name: '客户端选择爱心书籍',
component: () => import('./views/client/chooseBook.vue'),
meta: {
title: '爱心书籍'
},
children: []
}, {
path: '/image',
name: 'html转图片',
component: () => import('./views/html2canvas.vue'),
......
<template>
<div class="choose-book-page">
<div class="modify-top"></div>
<div class="belong-school">
<van-image
round
width="2rem"
height="2rem"
lazy-load
src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
style="vertical-align: text-bottom;"
>
<template v-slot:error>加载失败</template>
</van-image>
<p class="title">杨浦民办科技幼稚园</p>
</div>
<!-- 吊着的图片效果没有处理，让娜娜弄一张连到一起的图片试看看定位 -->
<van-row>
<van-col span="4"></van-col>
<van-col span="16">
<my-button type="custom" :custom-style="styleObject">幼儿园爱心书籍</my-button>
</van-col>
<van-col span="4"></van-col>
</van-row>
<div class="book-list">
<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>
<to-me @on-click="gotoMe()"></to-me>
</div>
</template>
<script setup>
import MyButton from '@/components/MyButton/index.vue'
import BookCard from '@/components/BookCard/index.vue'
import ToMe from '@/components/ToMe/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
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) => {
console.warn(item.id);
}
const gotoMe = () => {
console.warn('跳转我的地址');
}
onMounted(() => {
for (let index = 0; index < 20; index++) {
items.push({
id: index,
avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
})
}
})
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.modify-top {
z-index: 36;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: url(../../assets/images/modify-top.png)
0px 0px repeat-x;
}
.choose-book-page {
/**
* background-color and background-image 共存，不能使用渐变色
* 图片铺平当时精度提高看看效果
* 直接用渐变色
* 不使用渐变色背景
*/
height: 100%;
background: url(../../assets/images/choose-school-bg.png);
background-size: cover;
background: linear-gradient(360deg, #FDD347 0%, #FFED6D 100%) ;
.belong-school {
padding: 1.5rem;
.title {
color: #222222;
display: inline-block;
vertical-align: super;
margin-left: 1rem;
}
}
.book-list {
margin: 1rem;
border-radius: 10px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
}
.group4 {
width: 160px;
height: 15px;
margin-left: 83px;
}
.layer1 {
width: 15px;
height: 15px;
background-color: rgba(244, 103, 90, 1);
border-radius: 50%;
}
.layer2 {
width: 15px;
height: 15px;
background-color: rgba(244, 103, 90, 1);
border-radius: 50%;
}
.group18 {
z-index: 69;
position: absolute;
left: 113px;
top: 129px;
width: 5px;
height: 44px;
border-radius: 0 0 2.5px 2.5px;
background-color: rgba(255, 212, 167, 1);
}
.group19 {
z-index: 70;
position: absolute;
left: 258px;
top: 129px;
width: 5px;
height: 44px;
border-radius: 0 0 2.5px 2.5px;
background-color: rgba(255, 212, 167, 1);
}
}
</style>
\ No newline at end of file