Hooke / tswj

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

✨ feat(客户端): 入口页，书籍页，学校页细节优化

Inline Side-by-side
Showing 8 changed files with 98 additions and 48 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" style="height: auto;"></div> 9 + <div id="app"></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 +
2 +.modify-top {
3 + z-index: 36;
4 + position: absolute;
5 + left: 0;
6 + top: 0;
7 + width: 100%;
8 + height: 10px;
9 + background: url('@images/modify-top.png')
10 + 0px 0px repeat-x;
11 +}
12 +.content-bg {
13 + /**
14 + * background-color and background-image 共存，不能使用渐变色
15 + * 图片铺平当时精度提高看看效果
16 + * 直接用渐变色
17 + * 不使用渐变色背景
18 + */
19 + height: 100%;
20 + background: url('@images/choose-school-bg.png');
21 + background-size: cover;
22 + background: linear-gradient(360deg, #FDD347 0%, #FFED6D 100%) ;
23 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -54,6 +54,7 @@ export default { ...@@ -54,6 +54,7 @@ export default {
54 border-radius: 24px; 54 border-radius: 24px;
55 border: 1px solid @base; 55 border: 1px solid @base;
56 color: #0B3A72; 56 color: #0B3A72;
57 + font-weight: bold;
57 } 58 }
58 .button-plain { 59 .button-plain {
59 width: auto; 60 width: auto;
...@@ -66,6 +67,7 @@ export default { ...@@ -66,6 +67,7 @@ export default {
66 border-radius: 24px; 67 border-radius: 24px;
67 border: 1px solid #0B3A72; 68 border: 1px solid #0B3A72;
68 color: #0B3A72; 69 color: #0B3A72;
70 + font-weight: bold;
69 } 71 }
70 .button-custom { 72 .button-custom {
71 width: auto; 73 width: auto;
......
1 <template> 1 <template>
2 <div class="wrapper"> 2 <div class="wrapper">
3 - <van-image 3 + <div style="width: 4rem; height: 4rem; border-radius: 50%; background-color: #FFF; position: absolute;
4 + left: -2rem;">
5 + <van-image
6 + class="van-hairline--surround"
7 + round
8 + width="3.8rem"
9 + height="3.8rem"
10 + lazy-load
11 + :src="avatar"
12 + style="position: absolute; left: 0.1rem; top: 0.1rem;"
13 + >
14 + <template v-slot:error>加载失败</template>
15 + </van-image>
16 + </div>
17 + <!-- <van-image
4 class="van-hairline--surround" 18 class="van-hairline--surround"
5 round 19 round
6 width="4rem" 20 width="4rem"
...@@ -10,11 +24,11 @@ ...@@ -10,11 +24,11 @@
10 style="position: absolute; left: -2rem;" 24 style="position: absolute; left: -2rem;"
11 > 25 >
12 <template v-slot:error>加载失败</template> 26 <template v-slot:error>加载失败</template>
13 - </van-image> 27 + </van-image> -->
14 <div class="text-wrapper" @click="handle"> 28 <div class="text-wrapper" @click="handle">
15 <van-row> 29 <van-row>
16 <van-col span="20" style="color: #713610;"><slot></slot></van-col> 30 <van-col span="20" style="color: #713610;"><slot></slot></van-col>
17 - <van-col span="4"><van-icon name="arrow" /></van-col> 31 + <van-col span="4"><van-icon name="arrow" color="#c5c5c5" size="1.25rem" /></van-col>
18 </van-row> 32 </van-row>
19 </div> 33 </div>
20 </div> 34 </div>
...@@ -55,10 +69,11 @@ export default { ...@@ -55,10 +69,11 @@ export default {
55 .wrapper { 69 .wrapper {
56 position: relative; 70 position: relative;
57 background-color: #fff; 71 background-color: #fff;
58 - margin: 1rem; 72 + margin: 2rem;
59 margin-right: 0; 73 margin-right: 0;
60 margin-left: 4rem; 74 margin-left: 4rem;
61 height: 4rem; 75 height: 4rem;
76 + box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2);
62 .text-wrapper { 77 .text-wrapper {
63 text-align: left; 78 text-align: left;
64 line-height: 4rem; 79 line-height: 4rem;
......
1 <template> 1 <template>
2 - <div class="choose-book-page"> 2 + <div class="choose-book-page content-bg">
3 <div class="modify-top"></div> 3 <div class="modify-top"></div>
4 <div class="belong-school"> 4 <div class="belong-school">
5 <van-image 5 <van-image
...@@ -87,27 +87,8 @@ export default { ...@@ -87,27 +87,8 @@ export default {
87 </script> 87 </script>
88 88
89 <style lang="less" scoped> 89 <style lang="less" scoped>
90 - .modify-top { 90 +@import url('@css/content-bg.less');
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 { 91 .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 { 92 .belong-school {
112 padding: 1.5rem; 93 padding: 1.5rem;
113 .title { 94 .title {
......
1 <template> 1 <template>
2 - <div>vant template</div> 2 + <div class="choose-school-page content-bg">
3 - <template v-for="(item, key) in schoolList" :key="key"> 3 + <div class="modify-top"></div>
4 - <right-side-list 4 + <div style="height: 1rem;"></div>
5 - @on-click="onClick(item)" 5 + <template v-for="(item, key) in schoolList" :key="key">
6 - :avatar="item.avatar"> 6 + <right-side-list
7 - {{ item.name }} 7 + @on-click="onClick(item)"
8 - </right-side-list> 8 + :avatar="item.avatar">
9 - </template> 9 + {{ item.name }}
10 - 10 + </right-side-list>
11 + </template>
12 + <div style="height: 2rem;"></div>
13 + </div>
11 </template> 14 </template>
12 15
13 <script setup> 16 <script setup>
14 import RightSideList from '@/components/RightSideList/index.vue' 17 import RightSideList from '@/components/RightSideList/index.vue'
15 -import { reactive } from 'vue'; 18 +import { reactive, onMounted } from 'vue';
16 -const schoolList = reactive([{ 19 +import $ from 'jquery'
17 - id: '1', 20 +import { useRoute, useRouter } from 'vue-router'
18 - avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg', 21 +import { Toast } from 'vant';
19 - name: '中国福利会托儿所' 22 +const $route = useRoute();
20 -}, { 23 +const $router = useRouter();
21 - id: '2', 24 +const schoolList = reactive([])
22 - avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg', 25 +onMounted(() => {
23 - name: '徐汇区胡姬港湾幼儿园' 26 + for (let index = 0; index < 20; index++) {
24 -}]) 27 + schoolList.push({
28 + id: index,
29 + avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg',
30 + name: '中国福利会托儿所'
31 + })
32 + }
33 +})
25 34
26 const onClick = (item) => { 35 const onClick = (item) => {
27 - console.warn(item.id); 36 + $router.push({
37 + path: '/client/chooseBook'
38 + });
28 } 39 }
29 </script> 40 </script>
30 41
...@@ -47,5 +58,6 @@ export default { ...@@ -47,5 +58,6 @@ export default {
47 </script> 58 </script>
48 59
49 <style lang="less" scoped> 60 <style lang="less" scoped>
61 +@import url('@css/content-bg.less');
50 62
51 </style> 63 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
4 <p style="color: #B8B8B8; margin: 1rem;">请选择您的身份</p> 4 <p style="color: #B8B8B8; margin: 1rem;">请选择您的身份</p>
5 <div class="control"> 5 <div class="control">
6 <div class="plain"> 6 <div class="plain">
7 - <my-button type="plain">访客</my-button> 7 + <my-button type="plain" @on-click="goVisit">访客</my-button>
8 </div> 8 </div>
9 <div class="primary"> 9 <div class="primary">
10 - <my-button type="primary">我有所属幼儿园</my-button> 10 + <my-button type="primary" @on-click="goSchool">我有所属幼儿园</my-button>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
...@@ -16,6 +16,22 @@ ...@@ -16,6 +16,22 @@
16 16
17 <script setup> 17 <script setup>
18 import MyButton from '@/components/MyButton/index.vue' 18 import MyButton from '@/components/MyButton/index.vue'
19 +
20 +import { useRoute, useRouter } from 'vue-router'
21 +import { Toast } from 'vant';
22 +const $route = useRoute();
23 +const $router = useRouter();
24 +
25 +const goVisit = () => { // 跳转爱心书籍页面
26 + $router.push({
27 + path: '/client/chooseBook'
28 + });
29 +}
30 +const goSchool = () => { // 跳转选择幼儿园页面
31 + $router.push({
32 + path: '/client/chooseSchool'
33 + });
34 +}
19 </script> 35 </script>
20 36
21 <script> 37 <script>
......
...@@ -25,6 +25,7 @@ export default({ command, mode }) => { ...@@ -25,6 +25,7 @@ export default({ command, mode }) => {
25 "@components": path.resolve(__dirname, "src/components"), 25 "@components": path.resolve(__dirname, "src/components"),
26 "@utils": path.resolve(__dirname, "src/utils"), 26 "@utils": path.resolve(__dirname, "src/utils"),
27 "@images": path.resolve(__dirname, "src/assets/images"), 27 "@images": path.resolve(__dirname, "src/assets/images"),
28 + "@css": path.resolve(__dirname, "src/assets/css"),
28 "common": path.resolve(__dirname, "src/common"), 29 "common": path.resolve(__dirname, "src/common"),
29 }, 30 },
30 // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。 31 // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。
......