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 @@ ...@@ -6,7 +6,7 @@
6 <title></title> 6 <title></title>
7 </head> 7 </head>
8 <body> 8 <body>
9 - <div id="app"></div> 9 + <div id="app" style="height: auto;"></div>
10 <script type="module" src="/src/main.js"></script> 10 <script type="module" src="/src/main.js"></script>
11 </body> 11 </body>
12 </html> 12 </html>
......
1 +<template>
2 + <div class="book-item van-hairline--bottom" @click="handle">
3 + <van-row>
4 + <van-col span="6">
5 + <van-image
6 + width="5rem"
7 + height="5rem"
8 + :src="item.avatar"
9 + style="text-align: center;"
10 + />
11 + </van-col>
12 + <van-col span="18" style="padding-left: 1rem;">
13 + <p style="font-size: 1.15rem; color: #222222; font-weight: bold;">逃家小兔绘本</p>
14 + <div style="font-size: 0.85rem; color: #999999; margin: 0.5rem 0;" class="van-multi-ellipsis--l2">
15 + 从前有一只小兔子，总是想要离家出走。有一天，他对妈妈说如果有大灰狼怎么办，不要把门打开
16 + </div>
17 + <div style="font-size: 0.85rem; color: #999999; margin-top: 0.5rem;">
18 + <van-icon :name="icon_video" />
19 + 54个作品
20 + </div>
21 + </van-col>
22 + </van-row>
23 + </div>
24 +</template>
25 +
26 +<script setup>
27 +import icon_video from '@images/video.png'
28 +
29 +import { ref, reactive, onMounted } from 'vue'
30 +const props = defineProps({
31 + item: Object
32 +})
33 +const emit = defineEmits(['on-click']);
34 +const handle = () => {
35 + emit('on-click', '')
36 +}
37 + onMounted(() => {
38 +
39 + })
40 +</script>
41 +
42 +<script>
43 +export default {
44 + data () {
45 + return {
46 +
47 + }
48 + },
49 + mounted () {
50 +
51 + },
52 + methods: {
53 +
54 + }
55 +}
56 +</script>
57 +
58 +<style lang="less" scoped>
59 + .book-item {
60 + margin: 1rem;
61 + padding: 1rem;
62 + }
63 +</style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -23,6 +23,14 @@ export default [{ ...@@ -23,6 +23,14 @@ export default [{
23 }, 23 },
24 children: [] 24 children: []
25 }, { 25 }, {
26 + path: '/client/chooseBook',
27 + name: '客户端选择爱心书籍',
28 + component: () => import('./views/client/chooseBook.vue'),
29 + meta: {
30 + title: '爱心书籍'
31 + },
32 + children: []
33 +}, {
26 path: '/image', 34 path: '/image',
27 name: 'html转图片', 35 name: 'html转图片',
28 component: () => import('./views/html2canvas.vue'), 36 component: () => import('./views/html2canvas.vue'),
......
1 +<template>
2 + <div class="choose-book-page">
3 + <div class="modify-top"></div>
4 + <div class="belong-school">
5 + <van-image
6 + round
7 + width="2rem"
8 + height="2rem"
9 + lazy-load
10 + src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
11 + style="vertical-align: text-bottom;"
12 + >
13 + <template v-slot:error>加载失败</template>
14 + </van-image>
15 + <p class="title">杨浦民办科技幼稚园</p>
16 + </div>
17 + <!-- 吊着的图片效果没有处理，让娜娜弄一张连到一起的图片试看看定位 -->
18 + <van-row>
19 + <van-col span="4"></van-col>
20 + <van-col span="16">
21 + <my-button type="custom" :custom-style="styleObject">幼儿园爱心书籍</my-button>
22 + </van-col>
23 + <van-col span="4"></van-col>
24 + </van-row>
25 + <div class="book-list">
26 + <template v-for="(item, key) in items" :key="key">
27 + <book-card :item="item" @on-click="onClick(item)"></book-card>
28 + </template>
29 + </div>
30 + <div style="height: 1rem;"></div>
31 + <to-me @on-click="gotoMe()"></to-me>
32 + </div>
33 +</template>
34 +
35 +<script setup>
36 +import MyButton from '@/components/MyButton/index.vue'
37 +import BookCard from '@/components/BookCard/index.vue'
38 +import ToMe from '@/components/ToMe/index.vue'
39 +
40 +import { ref, reactive, onMounted } from 'vue'
41 +import { useRoute, useRouter } from 'vue-router'
42 +import axios from '@/utils/axios';
43 +import $ from 'jquery'
44 +import { Toast } from 'vant';
45 +const route = useRoute();
46 +const router = useRouter();
47 +// 自定义按钮颜色样式
48 +const styleObject = reactive({
49 + backgroundColor: '#F4675A',
50 + color: '#FFFFFF',
51 + borderColor: '#F4675A'
52 +})
53 +const items = reactive([])
54 +const onClick = (item) => {
55 + console.warn(item.id);
56 +}
57 +const gotoMe = () => {
58 + console.warn('跳转我的地址');
59 +}
60 + onMounted(() => {
61 + for (let index = 0; index < 20; index++) {
62 + items.push({
63 + id: index,
64 + avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
65 + })
66 + }
67 + })
68 +</script>
69 +
70 +<script>
71 +import mixin from 'common/mixin';
72 +
73 +export default {
74 + mixins: [mixin.init],
75 + data () {
76 + return {
77 +
78 + }
79 + },
80 + mounted () {
81 +
82 + },
83 + methods: {
84 +
85 + }
86 +}
87 +</script>
88 +
89 +<style lang="less" scoped>
90 + .modify-top {
91 + z-index: 36;
92 + position: absolute;
93 + left: 0;
94 + top: 0;
95 + width: 100%;
96 + height: 10px;
97 + background: url(../../assets/images/modify-top.png)
98 + 0px 0px repeat-x;
99 + }
100 + .choose-book-page {
101 + /**
102 + * background-color and background-image 共存，不能使用渐变色
103 + * 图片铺平当时精度提高看看效果
104 + * 直接用渐变色
105 + * 不使用渐变色背景
106 + */
107 + height: 100%;
108 + background: url(../../assets/images/choose-school-bg.png);
109 + background-size: cover;
110 + background: linear-gradient(360deg, #FDD347 0%, #FFED6D 100%) ;
111 + .belong-school {
112 + padding: 1.5rem;
113 + .title {
114 + color: #222222;
115 + display: inline-block;
116 + vertical-align: super;
117 + margin-left: 1rem;
118 + }
119 +
120 + }
121 + .book-list {
122 + margin: 1rem;
123 + border-radius: 10px;
124 + background-color: rgba(255, 255, 255, 1);
125 + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
126 + }
127 + .group4 {
128 + width: 160px;
129 + height: 15px;
130 + margin-left: 83px;
131 + }
132 +
133 + .layer1 {
134 + width: 15px;
135 + height: 15px;
136 + background-color: rgba(244, 103, 90, 1);
137 + border-radius: 50%;
138 + }
139 +
140 + .layer2 {
141 + width: 15px;
142 + height: 15px;
143 + background-color: rgba(244, 103, 90, 1);
144 + border-radius: 50%;
145 + }
146 + .group18 {
147 + z-index: 69;
148 + position: absolute;
149 + left: 113px;
150 + top: 129px;
151 + width: 5px;
152 + height: 44px;
153 + border-radius: 0 0 2.5px 2.5px;
154 + background-color: rgba(255, 212, 167, 1);
155 + }
156 +
157 + .group19 {
158 + z-index: 70;
159 + position: absolute;
160 + left: 258px;
161 + top: 129px;
162 + width: 5px;
163 + height: 44px;
164 + border-radius: 0 0 2.5px 2.5px;
165 + background-color: rgba(255, 212, 167, 1);
166 + }
167 + }
168 +</style>
...\ No newline at end of file ...\ No newline at end of file