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