kola-web
3 months ago
52 changed files with 1084 additions and 64 deletions
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-popup": "@vant/weapp/popup/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
@@ -0,0 +1,27 @@
|
||||
.popup1 { |
||||
padding: 110rpx 0 0; |
||||
width: 651rpx; |
||||
height: 651rpx; |
||||
box-sizing: border-box; |
||||
|
||||
.title { |
||||
font-size: 40rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
|
||||
.code { |
||||
margin: 48rpx auto 0; |
||||
display: block; |
||||
width: 304rpx; |
||||
height: 304rpx; |
||||
} |
||||
|
||||
.tip { |
||||
margin-top: 40rpx; |
||||
font-size: 32rpx; |
||||
color: #65686c; |
||||
text-align: center; |
||||
} |
||||
} |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
// pages/story/a.ts
|
||||
Component({ |
||||
/** |
||||
* 组件的属性列表 |
||||
*/ |
||||
properties: { |
||||
show: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
type: { |
||||
type: Number, |
||||
value: 0, |
||||
}, |
||||
}, |
||||
|
||||
/** |
||||
* 组件的初始数据 |
||||
*/ |
||||
data: {}, |
||||
|
||||
/** |
||||
* 组件的方法列表 |
||||
*/ |
||||
methods: { |
||||
handleClose() { |
||||
this.triggerEvent("close"); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
<van-popup show="{{ show }}" wx:if="{{type===1}}" custom-style="background: transparent;" bind:close="handleClose"> |
||||
<view class="popup1" style="background: url('/images/popup1-bg.png') no-repeat top center/100%;"> |
||||
<view class="title">关注适中健康微信公众号</view> |
||||
<image class="code" src="/images/place.png" show-menu-by-longpress></image> |
||||
<view class="tip">长按识别二维码关注</view> |
||||
</view> |
||||
</van-popup> |
||||
|
After Width: | Height: | Size: 329 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 705 B |
|
After Width: | Height: | Size: 930 B |
|
After Width: | Height: | Size: 816 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 270 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"navigationStyle": "default", |
||||
"navigationBarTitleText": "详情", |
||||
"usingComponents": { |
||||
"van-slider": "@vant/weapp/slider/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
.page { |
||||
padding: 48rpx 32rpx; |
||||
.page-title { |
||||
font-size: 44rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
line-height: 48rpx; |
||||
} |
||||
.page-date{ |
||||
margin-top: 24rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
}); |
||||
|
||||
export {} |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
<view class="page"> |
||||
<view class="page-title">身体活动引用的指南与专家共识</view> |
||||
<view class="page-date">2024/05/21</view> |
||||
<view class="audio-bar"> |
||||
<view class="a-header"> |
||||
<view class="wrap"> |
||||
<view class="name">概要解读</view> |
||||
<view class="date">00:01/09:47</view> |
||||
</view> |
||||
<image class="icon" src="/images/icon-play.png"></image> |
||||
<!-- <image class="icon" src="/images/icon-stop.png"></image> --> |
||||
</view> |
||||
<van-slider value="50" bind:change="onChange" /> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
{ |
||||
"navigationStyle": "default", |
||||
"navigationBarTitleText": "分类", |
||||
"usingComponents": { |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"pagination":"/components/pagination/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,109 @@
@@ -0,0 +1,109 @@
|
||||
page { |
||||
background-color: #f3f4f5; |
||||
} |
||||
.page { |
||||
padding-bottom: 80rpx; |
||||
.nav { |
||||
padding: 0 16rpx; |
||||
display: flex; |
||||
overflow-x: auto; |
||||
background-color: #fff; |
||||
&::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
.nav-item { |
||||
flex-shrink: 0; |
||||
padding: 32rpx 16rpx; |
||||
font-size: 32rpx; |
||||
color: #222222; |
||||
line-height: 36rpx; |
||||
&.active { |
||||
font-size: 36rpx; |
||||
color: #3795f7; |
||||
font-weight: bold; |
||||
position: relative; |
||||
&::after { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
content: ""; |
||||
width: 44rpx; |
||||
height: 8rpx; |
||||
background: #3795f7; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.types { |
||||
padding: 32rpx; |
||||
display: flex; |
||||
gap: 16rpx; |
||||
flex-wrap: wrap; |
||||
.type { |
||||
min-width: 160rpx; |
||||
padding: 8rpx 10rpx; |
||||
box-sizing: border-box; |
||||
font-size: 28rpx; |
||||
color: #65686c; |
||||
line-height: 40rpx; |
||||
background-color: #fff; |
||||
border-radius: 8rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
.card { |
||||
margin: 0 32rpx 24rpx; |
||||
padding: 24rpx; |
||||
display: flex; |
||||
gap: 24rpx; |
||||
background: linear-gradient(173deg, #ffffff 0%, #eff7ff 100%); |
||||
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||
border: 2rpx solid #ffffff; |
||||
&:last-of-type { |
||||
margin-bottom: 0; |
||||
} |
||||
.photo { |
||||
flex-shrink: 0; |
||||
width: 218rpx; |
||||
height: 218rpx; |
||||
border-radius: 16rpx; |
||||
} |
||||
.c-container { |
||||
flex: 1; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
line-height: 48rpx; |
||||
} |
||||
.type { |
||||
margin-top: 16rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
line-height: 28rpx; |
||||
} |
||||
.stat { |
||||
margin-top: 42rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 40rpx; |
||||
.s-item { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
.icon { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
} |
||||
&.active { |
||||
color: #3795f7; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,50 @@
@@ -0,0 +1,50 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: { |
||||
background: "transparent", |
||||
|
||||
pagination: { |
||||
page: 1, |
||||
pages: 1, |
||||
count: 1, |
||||
}, |
||||
list: [], |
||||
}, |
||||
onLoad() {}, |
||||
getList(newPage = 1) { |
||||
// wx.ajax({
|
||||
// method: "GET",
|
||||
// url: `?r=takeda/case/get-list`,
|
||||
// data: {
|
||||
// page: newPage,
|
||||
// },
|
||||
// }).then((res) => {
|
||||
// const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
|
||||
// this.setData({
|
||||
// list,
|
||||
// pagination: {
|
||||
// page: res.page,
|
||||
// pages: res.pages,
|
||||
// count: res.count,
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
}, |
||||
onReachBottom() { |
||||
const { page, pages } = this.data.pagination; |
||||
if (pages > page && this.data.list.length) { |
||||
this.getList(page + 1); |
||||
} |
||||
}, |
||||
handleDetail() { |
||||
wx.navigateTo({ |
||||
url: "/pages/article/index", |
||||
}); |
||||
}, |
||||
handleBack() { |
||||
wx.navigateBack(); |
||||
}, |
||||
}); |
||||
|
||||
export {}; |
||||
@ -0,0 +1,48 @@
@@ -0,0 +1,48 @@
|
||||
<view class="page"> |
||||
<view class="nav"> |
||||
<view class="nav-item active">全部</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
<view class="nav-item">引用指南与专家共识</view> |
||||
</view> |
||||
<view class="types"> |
||||
<view class="type active">全部</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
<view class="type">口腔</view> |
||||
</view> |
||||
<view class="card" bind:tap="handleDetail"> |
||||
<image class="photo" mode="aspectFill" src="/images/place.png"></image> |
||||
<view class="c-container"> |
||||
<view class="title">骨密度是骨健康的关键指标，我们检查对吗？</view> |
||||
<view class="type">健康管理/口腔</view> |
||||
<view class="stat"> |
||||
<view class="s-item"> |
||||
<image class="icon" src="/images/icon-eye.png"></image> |
||||
123 |
||||
</view> |
||||
<view class="s-item active"> |
||||
<image class="icon" src="/images/icon-collection-active.png"></image> |
||||
已收藏 |
||||
</view> |
||||
<view class="s-item"> |
||||
<image class="icon" src="/images/icon-collection.png"></image> |
||||
收藏 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<pagination pagination="{{pagination}}"></pagination> |
||||
</view> |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"usingComponents": { |
||||
"van-nav-bar": "@vant/weapp/nav-bar/index", |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"pagination":"/components/pagination/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@
@@ -0,0 +1,56 @@
|
||||
page { |
||||
background-color: #f3f4f5; |
||||
} |
||||
.page { |
||||
margin: 50rpx 32rpx 0; |
||||
padding-bottom: 80rpx; |
||||
.card { |
||||
padding: 24rpx; |
||||
display: flex; |
||||
gap: 24rpx; |
||||
background: linear-gradient(173deg, #ffffff 0%, #eff7ff 100%); |
||||
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||
border: 2rpx solid #ffffff; |
||||
.photo { |
||||
flex-shrink: 0; |
||||
width: 218rpx; |
||||
height: 218rpx; |
||||
border-radius: 16rpx; |
||||
} |
||||
.c-container { |
||||
flex: 1; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
line-height: 48rpx; |
||||
} |
||||
.type { |
||||
margin-top: 16rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
line-height: 28rpx; |
||||
} |
||||
.stat { |
||||
margin-top: 42rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 40rpx; |
||||
.s-item { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
.icon { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
} |
||||
&.active { |
||||
color: #3795f7; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: { |
||||
background: "transparent", |
||||
|
||||
pagination: { |
||||
page: 1, |
||||
pages: 1, |
||||
count: 1, |
||||
}, |
||||
list: [], |
||||
}, |
||||
onLoad() {}, |
||||
getList(newPage = 1) { |
||||
// wx.ajax({
|
||||
// method: "GET",
|
||||
// url: `?r=takeda/case/get-list`,
|
||||
// data: {
|
||||
// page: newPage,
|
||||
// },
|
||||
// }).then((res) => {
|
||||
// const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
|
||||
// this.setData({
|
||||
// list,
|
||||
// pagination: {
|
||||
// page: res.page,
|
||||
// pages: res.pages,
|
||||
// count: res.count,
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
}, |
||||
onReachBottom() { |
||||
const { page, pages } = this.data.pagination; |
||||
if (pages > page && this.data.list.length) { |
||||
this.getList(page + 1); |
||||
} |
||||
}, |
||||
handleBack() { |
||||
wx.navigateBack(); |
||||
}, |
||||
}); |
||||
|
||||
export {}; |
||||
@ -0,0 +1,34 @@
@@ -0,0 +1,34 @@
|
||||
<van-nav-bar |
||||
title="我的收藏" |
||||
border="{{false}}" |
||||
custom-style="background:{{background}}" |
||||
bind:click-left="handleBack" |
||||
fixed |
||||
> |
||||
<van-icon name="arrow-left" slot="left" color="#000" size="46rpx" /> |
||||
</van-nav-bar> |
||||
|
||||
<view class="page" style="padding-top:{{menuButtonInfo.bottom}}px;"> |
||||
<view class="card"> |
||||
<image class="photo" mode="aspectFill" src="/images/place.png"></image> |
||||
<view class="c-container"> |
||||
<view class="title">骨密度是骨健康的关键指标，我们检查对吗？</view> |
||||
<view class="type">健康管理/口腔</view> |
||||
<view class="stat"> |
||||
<view class="s-item"> |
||||
<image class="icon" src="/images/icon-eye.png"></image> |
||||
123 |
||||
</view> |
||||
<view class="s-item active"> |
||||
<image class="icon" src="/images/icon-collection-active.png"></image> |
||||
取消收藏 |
||||
</view> |
||||
<view class="s-item"> |
||||
<image class="icon" src="/images/icon-collection.png"></image> |
||||
收藏 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<pagination pagination="{{pagination}}"></pagination> |
||||
</view> |
||||
@ -0,0 +1,157 @@
@@ -0,0 +1,157 @@
|
||||
page { |
||||
background-color: #f3f4f5; |
||||
} |
||||
.page { |
||||
padding-bottom: 10vh; |
||||
min-height: 100vh; |
||||
.logo { |
||||
margin-left: 32rpx; |
||||
width: 216rpx; |
||||
height: 70rpx; |
||||
} |
||||
.page-title { |
||||
margin: 50rpx 0 0 32rpx; |
||||
width: 580rpx; |
||||
height: 52rpx; |
||||
} |
||||
.page-slogan { |
||||
margin-top: 22rpx; |
||||
margin-left: 32rpx; |
||||
font-size: 32rpx; |
||||
color: #222222; |
||||
} |
||||
.search { |
||||
margin: 34rpx 32rpx 0; |
||||
padding: 0 0 0 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
background: linear-gradient(158deg, #ffffff 0%, #f2f9fe 100%); |
||||
border-radius: 106rpx 106rpx 106rpx 106rpx; |
||||
border: 1px solid #ffffff; |
||||
.icon { |
||||
width: 36rpx; |
||||
height: 36rpx; |
||||
} |
||||
.input { |
||||
flex: 1; |
||||
padding: 16rpx; |
||||
line-height: 40rpx; |
||||
font-size: 28rpx; |
||||
} |
||||
.place-input { |
||||
color: #c9cdd4; |
||||
} |
||||
} |
||||
.swiper { |
||||
margin: 36rpx 32rpx 0; |
||||
height: 318rpx; |
||||
|
||||
.wx-swiper-dots { |
||||
bottom: 60rpx; |
||||
} |
||||
.wx-swiper-dot-active { |
||||
width: 24rpx !important; |
||||
height: 8rpx !important; |
||||
border-radius: 5rpx !important; |
||||
} |
||||
|
||||
.swiper-item { |
||||
position: relative; |
||||
.banner { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 1; |
||||
display: block; |
||||
width: 100%; |
||||
height: 274rpx; |
||||
} |
||||
&::after { |
||||
content: ""; |
||||
position: absolute; |
||||
bottom: 74rpx; |
||||
left: 40rpx; |
||||
width: 606rpx; |
||||
height: 194rpx; |
||||
background: rgba(0, 43, 88, 0.28); |
||||
box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.65); |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
filter: blur(16.5px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.cards { |
||||
margin: 0 32rpx; |
||||
display: grid; |
||||
gap: 28rpx 26rpx; |
||||
grid-template-columns: repeat(2, 1fr); |
||||
grid-template-rows: repeat(auto-fill, 164rpx); |
||||
.card { |
||||
padding: 20rpx 30rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
.title { |
||||
font-size: 36rpx; |
||||
color: #3795f7; |
||||
line-height: 42rpx; |
||||
} |
||||
.content { |
||||
margin-top: 10rpx; |
||||
font-size: 28rpx; |
||||
color: #65686c; |
||||
min-width: 0; |
||||
line-height: 40rpx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.remark { |
||||
margin: 52rpx 32rpx 0; |
||||
.r-header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
font-size: 36rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
&::before { |
||||
content: ""; |
||||
width: 8rpx; |
||||
height: 34rpx; |
||||
background-color: #3795f7; |
||||
} |
||||
} |
||||
.r-content { |
||||
margin-top: 30rpx; |
||||
padding: 32rpx; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
height: 272rpx; |
||||
font-size: 32rpx; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
} |
||||
.textarea-placeholder { |
||||
color: #babdc1; |
||||
} |
||||
.submit { |
||||
margin: 28rpx auto 0; |
||||
width: 236rpx; |
||||
height: 70rpx; |
||||
font-size: 28rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: 70rpx; |
||||
background: linear-gradient(90deg, #134df6 36%, #3795f7 100%); |
||||
border-radius: 112rpx 112rpx 112rpx 112rpx; |
||||
} |
||||
} |
||||
} |
||||
@ -1,2 +1,49 @@
@@ -1,2 +1,49 @@
|
||||
<!--pages/story/index.wxml--> |
||||
<text>pages/story/index.wxml</text> |
||||
<view class="page" style="background: url('/images/home-bg.png') no-repeat top center/100% 580rpx;padding-top:{{menuButtonInfo.top}}px;"> |
||||
<image class="logo" src="/images/home-logo.png"></image> |
||||
<image class="page-title" src="/images/home-title.png"></image> |
||||
<view class="page-slogan">人人都是家庭健康师，让生活更有质量</view> |
||||
<view class="search"> |
||||
<image class="icon" src="/images/icon-search.png"></image> |
||||
<input |
||||
type="text" |
||||
class="input" |
||||
placeholder-class="place-input" |
||||
confirm-type="search" |
||||
bindconfirm="handleSearch" |
||||
placeholder="请输入要搜索的内容" |
||||
/> |
||||
</view> |
||||
<swiper |
||||
class="swiper" |
||||
indicator-dots |
||||
indicator-color="rgba(255,255,255,0.62)" |
||||
indicator-active-color="#FFFFFF" |
||||
> |
||||
<swiper-item class="swiper-item"> |
||||
<image class="banner" src="/images/place.png"></image> |
||||
</swiper-item> |
||||
</swiper> |
||||
<view class="cards"> |
||||
<view |
||||
class="card" |
||||
wx:for="{{10}}" |
||||
wx:key="index" |
||||
style="background: url('/images/home-card-bg.png') no-repeat center/100%" |
||||
bind:tap="handleDetail" |
||||
> |
||||
<view class="title">公司综合信息</view> |
||||
<view class="content">健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策</view> |
||||
</view> |
||||
</view> |
||||
<view class="remark"> |
||||
<view class="r-header"> |
||||
留言板 |
||||
</view> |
||||
<textarea |
||||
class="r-content" |
||||
placeholder-class="textarea-placeholder" |
||||
placeholder="欢迎反馈您的问题" |
||||
></textarea> |
||||
<view class="submit">提交</view> |
||||
</view> |
||||
</view> |
||||
|
||||
@ -1,3 +1,6 @@
@@ -1,3 +1,6 @@
|
||||
{ |
||||
"usingComponents": {} |
||||
"usingComponents": { |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"global-toast":"/components/global-toast/index" |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,79 @@
@@ -0,0 +1,79 @@
|
||||
page { |
||||
background-color: #f3f4f5; |
||||
} |
||||
.page { |
||||
background: linear-gradient(180deg, #d2f1fe 0%, rgba(244, 248, 249, 0) 100%) no-repeat top center / 100% 682rpx; |
||||
.no-login { |
||||
margin: 32rpx 62rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24rpx; |
||||
.avatar { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
} |
||||
.name { |
||||
font-size: 40rpx; |
||||
color: #3795f7; |
||||
} |
||||
} |
||||
.login { |
||||
margin: 32rpx 62rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24rpx; |
||||
.avatar { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 50%; |
||||
} |
||||
.user { |
||||
flex: 1; |
||||
.name { |
||||
font-size: 40rpx; |
||||
color: #141515; |
||||
font-weight: bold; |
||||
line-height: 1; |
||||
} |
||||
.tel { |
||||
margin-top: 8rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
line-height: 40rpx; |
||||
} |
||||
.status { |
||||
margin-top: 8rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
line-height: 40rpx; |
||||
} |
||||
} |
||||
.switch { |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
} |
||||
} |
||||
.nav-list { |
||||
margin: 70rpx 32rpx 0; |
||||
padding: 0 30rpx; |
||||
background: #ffffff; |
||||
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||
border: 2rpx solid #ffffff; |
||||
.nav-item { |
||||
padding: 32rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
border-bottom: 1px solid #f0f0f0; |
||||
font-size: 36rpx; |
||||
color: #000000; |
||||
&:last-of-type { |
||||
border: none; |
||||
} |
||||
.icon { |
||||
margin-right: 20rpx; |
||||
width: 48rpx; |
||||
height: 48rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,6 +1,25 @@
@@ -1,6 +1,25 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
data: { |
||||
toastShow: false, |
||||
toastType: 1, |
||||
}, |
||||
onLoad() {}, |
||||
handleCollection() { |
||||
wx.navigateTo({ |
||||
url: "/pages/collection/index", |
||||
}); |
||||
}, |
||||
handleOffice() { |
||||
this.setData({ |
||||
toastShow: true, |
||||
toastType: 1, |
||||
}); |
||||
}, |
||||
handleToastClose() { |
||||
this.setData({ |
||||
toastShow: false, |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
@ -1,2 +1,30 @@
@@ -1,2 +1,30 @@
|
||||
<!--pages/story/index.wxml--> |
||||
<text>pages/story/index.wxml</text> |
||||
<view class="page" style="padding-top:{{ menuButtonInfo.bottom }}px;"> |
||||
<view class="no-login"> |
||||
<image class="avatar" src="/images/user.png"></image> |
||||
<view class="name">登录</view> |
||||
</view> |
||||
<view class="login"> |
||||
<image class="avatar" mode="aspectFill" src="/images/place.png"></image> |
||||
<view class="user"> |
||||
<view class="name">徐萌</view> |
||||
<view class="tel">186****7587</view> |
||||
<view class="status">非会员</view> |
||||
</view> |
||||
<view class="switch"> |
||||
切换账号 |
||||
<van-icon name="arrow" /> |
||||
</view> |
||||
</view> |
||||
<view class="nav-list"> |
||||
<view class="nav-item" bind:tap="handleCollection"> |
||||
<image class="icon" src="/images/my-list-icon1.png"></image> |
||||
我的收藏 |
||||
</view> |
||||
<view class="nav-item" bind:tap="handleOffice"> |
||||
<image class="icon" src="/images/my-list-icon2.png"></image> |
||||
关注公众号 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<global-toast show="{{toastShow}}" type="{{toastType}}" bind:close="handleToastClose"></global-toast> |
||||
|
||||
@ -1,3 +1,5 @@
@@ -1,3 +1,5 @@
|
||||
{ |
||||
"usingComponents": {} |
||||
"usingComponents": { |
||||
"van-progress": "@vant/weapp/progress/index" |
||||
} |
||||
} |
||||
|
||||
@ -1,9 +1,42 @@
@@ -1,9 +1,42 @@
|
||||
<view |
||||
class="page" |
||||
style="background: url('/images/topic-bg.png') no-repeat {{menuButtonInfo.bottom+62}}rpx center/100% 1284rpx;" |
||||
> |
||||
<view |
||||
class="topic" |
||||
style="background: url("/images/topic-card-bg.png") no-repeat top center/100% 1232rpx" |
||||
></view> |
||||
<view class="page" style="background: url('/images/topic-bg.png') no-repeat {{menuButtonInfo.bottom+62}}rpx center/100% 1284rpx;"> |
||||
|
||||
<swiper |
||||
class="swiper" |
||||
current="{{nav}}" |
||||
bindtransition="bindtransition" |
||||
style="margin-top:{{menuButtonInfo.bottom+73}}px;" |
||||
> |
||||
<swiper-item |
||||
wx:for="{{question}}" |
||||
wx:key="index" |
||||
wx:for-item="questionItem" |
||||
> |
||||
<view class="topic" style="background: url('/images/topic-card-bg.png') no-repeat top center/100% 1232rpx;"> |
||||
<view class="order">{{nav + 1}}/ |
||||
<text class="all">9</text> |
||||
</view> |
||||
<view class="progress"> |
||||
<van-progress |
||||
percentage="50" |
||||
show-pivot="{{false}}" |
||||
stroke-width="{{8}}" |
||||
track-color="#F4F7FA" |
||||
color="#3795F7" |
||||
/> |
||||
</view> |
||||
<view class="content"> |
||||
{{questionItem.content}} |
||||
</view> |
||||
<view class="conform">是</view> |
||||
<view class="cancel">否</view> |
||||
<view class="prev"> |
||||
<view class="prev-item"> |
||||
<image class="icon" src="/images/icon-prev.png"></image> |
||||
上一题 |
||||
</view> |
||||
<view class="submit" wx:if="{{true}}">提交</view> |
||||
</view> |
||||
</view> |
||||
</swiper-item> |
||||
</swiper> |
||||
</view> |
||||
|
||||
Loading…
Reference in new issue