Skip to content

飞
飞鹤小程序
Commit 3aa6a4c2 authored by spc's avatar spc
Browse files
Options

swiper

parent 974ed970
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 126 deletions
pages/feedingIndex/feedingIndex.vue
View file @ 3aa6a4c2
......@@ -3,10 +3,13 @@
<!-- 广告横幅 -->
<view class="ad-banner">
<image class="banner-bg" src="/static/feedingIndex/v1/banner.png" mode="aspectFill" />
</view>
<swiper class="banner-swiper" :indicator-dots="swiperData.length > 1" :autoplay="swiperData.length > 1"
:circular="swiperData.length > 1" indicator-color="#dfddd9" indicator-active-color="#b27c1e"
:indicator-top="596">
<swiper-item v-for="(item, index) in swiperData" :key="index">
<image class="banner-img" :src="`${item?.bannerImg}`" mode="aspectFill" @click="bannerHandler(item)" />
</swiper-item>
</swiper>
<!-- 喂养时间 -->
<view class="feeding-time">
......@@ -43,8 +46,10 @@
<text class="duration-unit">分钟</text>
</view>
<view class="duration-buttons">
<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit" @click="adjustDuration('left', -1)" />
<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit" @click="adjustDuration('left', 1)" />
<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit"
@click="adjustDuration('left', -1)" />
<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit"
@click="adjustDuration('left', 1)" />
</view>
<text class="duration-label">左侧哺乳时长</text>
</view>
......@@ -54,8 +59,10 @@
<text class="duration-unit">分钟</text>
</view>
<view class="duration-buttons">
<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit" @click="adjustDuration('right', -1)" />
<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit" @click="adjustDuration('right', 1)" />
<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit"
@click="adjustDuration('right', -1)" />
<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit"
@click="adjustDuration('right', 1)" />
</view>
<text class="duration-label">右侧哺乳时长</text>
</view>
......@@ -80,8 +87,10 @@
<text class="bubble-value">{{ amount }}ml</text>
</view>
<view class="adjust-arrows">
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit" @click="adjustAmount(10)" />
<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit" @click="adjustAmount(-10)" />
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit"
@click="adjustAmount(10)" />
<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit"
@click="adjustAmount(-10)" />
</view>
</view>
</view>
......@@ -148,11 +157,15 @@
<!-- 录音控制区域 -->
<view v-if="recordMethod === 'voice'" class="voice-controls">
<view class="voice-status">
<image class="voice-icon" :src="isRecording ? '/static/feedingIndex/v1/icon_luyining.png' : '/static/feedingIndex/v1/icon_luyin.png'" mode="aspectFit" />
<image class="voice-icon"
:src="isRecording ? '/static/feedingIndex/v1/icon_luyining.png' : '/static/feedingIndex/v1/icon_luyin.png'"
mode="aspectFit" />
<text class="voice-text">{{ isRecording ? '录音中...' : '点击开始录音' }}</text>
</view>
<view class="voice-buttons">
<image class="voice-btn" :src="isRecording ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'" mode="aspectFit" @click="toggleRecording" />
<image class="voice-btn"
:src="isRecording ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
mode="aspectFit" @click="toggleRecording" />
</view>
</view>
......@@ -236,123 +249,18 @@ function getTabImage() {
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background: #FFF8F1;
.back-icon {
font-size: 40rpx;
color: #333;
font-weight: bold;
}
.title {
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.banner-swiper {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 191rpx;
width: 687rpx;
height: 176rpx;
.nav-right {
display: flex;
gap: 20rpx;
.nav-icon {
font-size: 28rpx;
color: #333;
}
}
}
.ad-banner {
position: relative;
margin: 20rpx 30rpx;
border-radius: 20rpx;
overflow: hidden;
height: 200rpx;
.banner-bg {
position: absolute;
top: 0;
left: 0;
.banner-img {
width: 100%;
height: 100%;
z-index: 1;
}
.banner-left {
position: relative;
z-index: 2;
flex: 1;
padding: 30rpx;
.brand {
display: block;
font-size: 28rpx;
color: #333;
font-weight: bold;
margin-bottom: 10rpx;
}
.slogan {
display: block;
font-size: 24rpx;
color: #333;
margin-bottom: 20rpx;
}
.test-btn {
display: flex;
align-items: center;
gap: 10rpx;
background: #0066CC;
color: white;
padding: 10rpx 20rpx;
border-radius: 20rpx;
width: fit-content;
margin-bottom: 10rpx;
.test-icon {
font-size: 20rpx;
}
.test-text {
font-size: 24rpx;
}
}
.sales-text {
font-size: 20rpx;
color: #666;
}
}
.banner-right {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
z-index: 2;
.milk-can {
position: relative;
width: 100rpx;
height: 120rpx;
background: #FFD700;
border-radius: 50rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.benefit-text {
font-size: 18rpx;
color: #333;
writing-mode: vertical-rl;
}
}
border-radius: 16rpx;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment