kola-web
3 months ago
22 changed files with 597 additions and 69 deletions
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 551 B |
@ -1,14 +1,185 @@
@@ -1,14 +1,185 @@
|
||||
.page { |
||||
padding: 48rpx 32rpx; |
||||
padding: 48rpx 32rpx 200rpx; |
||||
|
||||
.page-title { |
||||
font-size: 44rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
line-height: 48rpx; |
||||
} |
||||
|
||||
.page-date { |
||||
margin-top: 24rpx; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
} |
||||
|
||||
.audio-bar { |
||||
margin-top: 32rpx; |
||||
padding: 32rpx; |
||||
--slider-disabled-opacity: 1; |
||||
background-color: #f9fafb; |
||||
border-radius: 24rpx; |
||||
|
||||
.a-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.wrap { |
||||
line-height: 1; |
||||
|
||||
.name { |
||||
font-size: 32rpx; |
||||
color: #000000; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.date { |
||||
margin-top: 12rpx; |
||||
font-size: 24rpx; |
||||
color: #65686c; |
||||
} |
||||
} |
||||
|
||||
.icon { |
||||
width: 42rpx; |
||||
height: 42rpx; |
||||
} |
||||
} |
||||
|
||||
.progress { |
||||
display: block; |
||||
margin-top: 30rpx; |
||||
} |
||||
} |
||||
|
||||
.rich { |
||||
margin-top: 32rpx; |
||||
} |
||||
|
||||
.quick-article { |
||||
margin-top: 24rpx; |
||||
padding: 26rpx 32rpx; |
||||
background: #f9fafb; |
||||
line-height: 48rpx; |
||||
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||
|
||||
.label { |
||||
font-size: 32rpx; |
||||
color: #3795f7; |
||||
} |
||||
} |
||||
|
||||
.type { |
||||
margin-top: 48rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
gap: 24rpx; |
||||
|
||||
.label { |
||||
font-size: 32rpx; |
||||
color: #999999; |
||||
} |
||||
|
||||
.item { |
||||
padding: 6rpx 24rpx; |
||||
border-radius: 40rpx; |
||||
font-size: 32rpx; |
||||
color: #fff; |
||||
background-color: #3795f7; |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom)); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
box-shadow: 0 -6rpx 32.8rpx rgba(0, 0, 0, 0.1); |
||||
background: #ffffff; |
||||
|
||||
.item { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12rpx; |
||||
|
||||
.icon { |
||||
width: 56rpx; |
||||
height: 56rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.popup-directory { |
||||
.p-close-line { |
||||
padding: 36rpx 32rpx; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.option { |
||||
font-size: 32rpx; |
||||
color: #999999; |
||||
.icon { |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
.p-title { |
||||
padding: 0 32rpx; |
||||
font-size: 44rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
} |
||||
.p-type { |
||||
padding: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
gap: 24rpx; |
||||
|
||||
.label { |
||||
font-size: 32rpx; |
||||
color: #999999; |
||||
} |
||||
|
||||
.item { |
||||
padding: 6rpx 24rpx; |
||||
border-radius: 40rpx; |
||||
font-size: 32rpx; |
||||
color: #fff; |
||||
background-color: #3795f7; |
||||
} |
||||
} |
||||
.p-scroll { |
||||
max-height: 50vh; |
||||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); |
||||
.row { |
||||
padding: 32rpx; |
||||
position: relative; |
||||
&::after { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 32rpx; |
||||
content: ''; |
||||
width: calc(100% - 64rpx); |
||||
height: 1px; |
||||
background-color: #f0f0f0; |
||||
} |
||||
&:last-of-type::after { |
||||
display: none; |
||||
} |
||||
&.current { |
||||
background: rgba(55, 149, 247, 0.06); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,8 +1,79 @@
@@ -1,8 +1,79 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
data: { |
||||
show: false, |
||||
|
||||
progress: 0, |
||||
url: 'http://m10.music.126.net/20241126110303/3f2481d2d6d50acd2009359539eadda0/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3', |
||||
play: false, |
||||
time: '00:01/00:00', |
||||
}, |
||||
innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null, |
||||
onLoad() { |
||||
this.innerAudioContext = wx.createInnerAudioContext(); |
||||
}, |
||||
onUnload() { |
||||
if (this.innerAudioContext) { |
||||
this.innerAudioContext?.stop(); |
||||
this.innerAudioContext.destroy(); |
||||
} |
||||
}, |
||||
handlePlay() { |
||||
const { url, play } = this.data; |
||||
if (this.innerAudioContext) { |
||||
if (play) { |
||||
this.innerAudioContext.stop(); |
||||
return; |
||||
} |
||||
this.innerAudioContext.stop(); |
||||
this.innerAudioContext.src = url; |
||||
this.innerAudioContext.play(); |
||||
this.setData({ |
||||
play: true, |
||||
}); |
||||
const listener = () => { |
||||
if (this.innerAudioContext) { |
||||
const { currentTime, duration } = this.innerAudioContext; |
||||
const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`; |
||||
const progress = (currentTime / duration) * 100; |
||||
this.setData({ |
||||
time, |
||||
progress, |
||||
}); |
||||
} |
||||
}; |
||||
this.innerAudioContext.onTimeUpdate(listener); |
||||
this.innerAudioContext.onEnded(() => { |
||||
this.setData({ |
||||
play: false, |
||||
}); |
||||
}); |
||||
this.innerAudioContext.onStop(() => { |
||||
this.setData({ |
||||
play: false, |
||||
}); |
||||
}); |
||||
} |
||||
}, |
||||
handlePause() { |
||||
if (this.innerAudioContext) { |
||||
this.innerAudioContext.pause(); |
||||
this.setData({ |
||||
play: false, |
||||
}); |
||||
} |
||||
}, |
||||
formatTime(time: number) { |
||||
const minutes = Math.floor(time / 60); |
||||
const seconds = Math.floor(time % 60); |
||||
return `${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; |
||||
}, |
||||
onClose() { |
||||
this.setData({ |
||||
show: false, |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
export {} |
||||
export {}; |
||||
|
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"navigationBarTitleText": "用户隐私协议", |
||||
"navigationStyle": "default", |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
.page { |
||||
padding: 32rpx; |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
}); |
||||
|
||||
export {} |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
<view class="page"></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,99 @@
@@ -0,0 +1,99 @@
|
||||
page { |
||||
background-color: #f3f4f5; |
||||
} |
||||
.page { |
||||
padding-bottom: 80rpx; |
||||
.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; |
||||
} |
||||
} |
||||
.tip { |
||||
margin: 52rpx 32rpx 0; |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
} |
||||
.card { |
||||
padding: 24rpx; |
||||
margin: 24rpx 32rpx 0; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.empty-search { |
||||
.e-icon { |
||||
margin: 186rpx auto 0; |
||||
display: block; |
||||
width: 217rpx; |
||||
height: 236rpx; |
||||
} |
||||
.content { |
||||
margin-top: 44rpx; |
||||
font-size: 32rpx; |
||||
line-height: 48rpx; |
||||
color: #999999; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
@ -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,54 @@
@@ -0,0 +1,54 @@
|
||||
<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="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> |
||||
<view class="tip">以下为搜到的内容</view> |
||||
<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> |
||||
<view class="empty-search" wx:if="{{search && pagination.count===0}}"> |
||||
<image class="e-icon" src="/images/empty-1.png"></image> |
||||
<view class="content"> |
||||
抱歉，未搜到相关内容 |
||||
<view></view> |
||||
换个词试试吧 |
||||
</view> |
||||
</view> |
||||
<pagination wx:else pagination="{{pagination}}"></pagination> |
||||
</view> |
||||
Loading…
Reference in new issue