773 lines
27 KiB
Vue
773 lines
27 KiB
Vue
<template>
|
||
<view v-if="!is_loading" class="flex-row align-c jc-c pa-20 box-border-box oh bg-f9" :style="good_style">
|
||
<block v-if="good_list.length > 0">
|
||
<!-- 固定在顶部的商品操作栏 -->
|
||
<view class="goods-header-fixed" :style="'width:' + propWindowWidth + 'px;'">
|
||
<view class="flex-row align-c jc-e pa-10">
|
||
<view class="flex-col" @tap="goods_order">
|
||
<u-icon propName="list-setup" propSize="36rpx" propColor="#999"></u-icon>
|
||
<text class="mt-5 size-12 cr-9">订单</text>
|
||
</view>
|
||
<view class="flex-col ml-10" @tap="goods_cart">
|
||
<u-icon propName="cart-solid" propSize="36rpx" propColor="#999"></u-icon>
|
||
<text class="mt-5 size-12 cr-9">购物车</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- nvue 使用 list进行列表渲染 -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="scroll-type" :style="good_style + (propIsGoodsPopup ? 'padding-bottom: 20rpx;' : '' )" :show-scrollbar="false">
|
||
<cell v-for="(item, index) in good_list" :key="item.id">
|
||
<!-- #endif -->
|
||
<!-- scroll-view 只有非nvue的页面使用 -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view scroll-y class="scroll-type" :style="good_style + (propIsGoodsPopup ? 'padding-bottom: 20rpx;' : '' )" :show-scrollbar="false">
|
||
<view v-for="(item, index) in good_list" :key="item.id">
|
||
<!-- #endif -->
|
||
<!-- 商品项 -->
|
||
<view :class="'goods-item flex-row align-c box-border-box' + (item.id == explanation_id ? ' bg-red-light' : '')" :style="'width:' + (propWindowWidth - 24) + 'px;'" :data-index="index" :data-value="item.checkbox" :data-url="item.goods_url" @tap="goods_detail">
|
||
<view class="flex-1">
|
||
<view class="flex-row align-c">
|
||
<view class="pr goods-item-image-container">
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image :class="propIsGoodsPopup ? 'goods-item-popup-image' : 'goods-item-image'" :src="item.images" mode="aspectFit"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<image :class="propIsGoodsPopup ? 'goods-item-popup-image' : 'goods-item-image'" :src="item.images" mode="aspectFit"></image>
|
||
<!-- #endif -->
|
||
<!-- 商品序号标识 -->
|
||
<text class="image-top-index">{{ index + 1 }}</text>
|
||
<!-- 正在讲解中的商品音乐进度条 -->
|
||
<view v-if="item.id == explanation_id" class="music-progress-container flex-row align-c jc-c" :style="propIsGoodsPopup ? 'width: 200rpx;' : 'width: 120rpx;'">
|
||
<!-- #ifndef APP-NVUE -->
|
||
<view class="music-progress-bars mr-5">
|
||
<view class="music-bar bar1"></view>
|
||
<view class="music-bar bar2"></view>
|
||
<view class="music-bar bar3"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view class="music-progress-bars mr-5">
|
||
<view :ref="(el) => { if(item.id == explanation_id) bar1Ref[index] = el }" class="music-bar nvue-bar"></view>
|
||
<view :ref="(el) => { if(item.id == explanation_id) bar2Ref[index] = el }" class="music-bar nvue-bar"></view>
|
||
<view :ref="(el) => { if(item.id == explanation_id) bar3Ref[index] = el }" class="music-bar nvue-bar"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<text class="size-12 cr-f">讲解中</text>
|
||
</view>
|
||
</view>
|
||
<!-- 商品信息区域 -->
|
||
<view class="ml-10 flex-1 flex-col jc-sb goods-item-popup-content">
|
||
<text class="goods-item-title text-line-2">{{ item.title }}</text>
|
||
<view class="flex-1 mt-10">
|
||
<view class="flex-1 flex-row align-c jc-sb">
|
||
<view class="flex-row align-c">
|
||
<text class="mr-5 size-14 cr-9">{{ item.show_price_symbol}}</text>
|
||
<text class="goods-item-price size-14 cr-price">{{ item.price }}</text>
|
||
<text class="ml-5 size-14 cr-9">{{ item.show_price_unit }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row align-c mt-10 jc-sb">
|
||
<view class="flex-row align-c">
|
||
<text class="mr-5 size-14 cr-9">库存</text>
|
||
<text class="goods-item-inventory size-14 cr-9">{{ item.inventory }}</text>
|
||
</view>
|
||
<!-- 购买按钮 -->
|
||
<button type="primary" class="btn-block cr-main bg-main mr-0 ml-0 flex-row align-c jc-c pa-5" style="width: 100rpx;height:48rpx;border-radius: 10rpx" :data-id="item.id" :data-url="item.goods_url" @tap="goods_detail"><text class="size-14 cr-f">购买</text></button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef APP-NVUE -->
|
||
</cell>
|
||
<cell>
|
||
<component-bottom-line :propStatus="bottom_line_status" :propWidth="propWindowWidth"></component-bottom-line>
|
||
</cell>
|
||
</list>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
</view>
|
||
<component-bottom-line :propStatus="bottom_line_status"></component-bottom-line>
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</block>
|
||
<block v-else>
|
||
<!-- 无商品时的提示 -->
|
||
<view class="flex-1 flex-col align-c">
|
||
<text class="tip-title">暂无商品</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import componentBottomLine from '@/components/bottom-line/bottom-line.vue';
|
||
const app = getApp();
|
||
|
||
/**
|
||
* 商品展示组件
|
||
* 用于直播间商品列表展示，支持普通页面和弹窗两种模式
|
||
*/
|
||
export default {
|
||
name: 'Goods',
|
||
components: {
|
||
componentBottomLine
|
||
},
|
||
props: {
|
||
/**
|
||
* 是否是商品弹出框
|
||
* 弹出框一般是用在直播页显示的商品列表，直播开始前isGoodsPopup是false，显示的是一整个页面
|
||
*/
|
||
propIsGoodsPopup: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
/**
|
||
* 直播间ID
|
||
*/
|
||
propLiveRoomId: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
propWindowWidth: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
propWindowHeight: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
//#region 初始化
|
||
// 搜索按钮点击事件
|
||
page: 1,
|
||
is_loading: true,
|
||
//#endregion
|
||
|
||
//#region 打开商品弹出框
|
||
popup_goods_show: false,
|
||
good_list: [],
|
||
//#endregion
|
||
|
||
//#region 商品列表处理
|
||
bottom_line_status: true,
|
||
explanation_id: '',
|
||
//#endregion
|
||
|
||
//#region 音乐进度条相关逻辑
|
||
// #ifdef APP-NVUE
|
||
// 在nvue平台，使用transition动画实现
|
||
nvue_animation: null,
|
||
bar1Ref: [],
|
||
bar2Ref: [],
|
||
bar3Ref: [],
|
||
animationTimers: [],
|
||
// #endif
|
||
//#endregion
|
||
}
|
||
},
|
||
computed: {
|
||
//#region 设置页面屏幕大小
|
||
/**
|
||
* 商品区域样式
|
||
* 根据是否为弹出框模式计算不同的宽高
|
||
*/
|
||
good_style() {
|
||
// 判断是否是弹出框形式
|
||
if (!this.propIsGoodsPopup) {
|
||
return `width:${ this.propWindowWidth }px;height: ${ this.propWindowHeight }px;`;
|
||
} else {
|
||
console.log(this.propWindowHeight);
|
||
|
||
// 如果是弹出框模式的就不全屏显示
|
||
return `width:${ this.propWindowWidth }px;height: ${ this.propWindowHeight - 300}px;`;
|
||
}
|
||
},
|
||
//#endregion
|
||
|
||
// 获取选中数量
|
||
checkbox_number() {
|
||
return this.good_list.filter(item => item.checkbox).length;
|
||
}
|
||
},
|
||
watch: {
|
||
//#region 音乐进度条相关逻辑
|
||
// #ifdef APP-NVUE
|
||
/**
|
||
* 监听正在讲解的商品ID变化
|
||
* 当商品讲解状态发生变化时，控制音频动画的播放和停止
|
||
*/
|
||
explanation_id: {
|
||
handler(newVal, oldVal) {
|
||
// 先停止所有动画
|
||
this.stop_nvue_animation();
|
||
|
||
if (newVal) {
|
||
// 延迟启动动画，确保元素已渲染
|
||
setTimeout(() => {
|
||
// 找到正在讲解的商品索引
|
||
const index = this.good_list.findIndex(item => item.id == newVal);
|
||
if (index !== -1) {
|
||
this.start_nvue_height_animation(this.bar1Ref[index], 100);
|
||
this.start_nvue_height_animation2(this.bar2Ref[index], 300);
|
||
this.start_nvue_height_animation3(this.bar3Ref[index], 500);
|
||
}
|
||
}, 50);
|
||
}
|
||
}
|
||
}
|
||
// #endif
|
||
//#endregion
|
||
},
|
||
mounted() {
|
||
// 初始化商品列表
|
||
this.init();
|
||
|
||
// #ifdef APP-NVUE
|
||
this.nvue_animation = uni.requireNativePlugin('animation');
|
||
// #endif
|
||
},
|
||
onShow() {
|
||
this.init();
|
||
},
|
||
beforeDestroy() {
|
||
// #ifdef APP-NVUE
|
||
this.stop_nvue_animation();
|
||
// #endif
|
||
},
|
||
methods: {
|
||
//#region 初始化
|
||
/**
|
||
* 初始化商品列表
|
||
* 请求服务器获取商品数据并更新界面
|
||
*/
|
||
init() {
|
||
if (!this.propIsGoodsPopup) {
|
||
this.is_loading = true;
|
||
} else {
|
||
this.is_loading = false;
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
});
|
||
uni.request({
|
||
url: app.globalData.get_request_url('index','roomgoods','live'),
|
||
method: 'POST',
|
||
data: {},
|
||
dataType: 'json',
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
this.is_loading = false;
|
||
const new_data = res.data;
|
||
if (new_data.code == 0) {
|
||
this.good_list = new_data.data;
|
||
// 遍历获取讲解id
|
||
const explain_data = new_data.data.filter(item => item.live_room_goods_is_explain == 1);
|
||
if (explain_data.length > 0) {
|
||
this.explanation_id = explain_data[0].id;
|
||
}
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.hideLoading();
|
||
this.is_loading = false;
|
||
}
|
||
});
|
||
},
|
||
//#endregion
|
||
|
||
//#region 打开商品弹出框
|
||
// 添加商品
|
||
add_goods() {
|
||
this.popup_goods_show = false;
|
||
this.$nextTick(() => {
|
||
this.popup_goods_show = true;
|
||
this.$refs.popupGoodsRef.open();
|
||
})
|
||
},
|
||
|
||
// 添加商品弹出框事件
|
||
submitEvent() {
|
||
this.$refs.popupGoodsRef.close();
|
||
// 刷新数据
|
||
this.init();
|
||
},
|
||
//#endregion
|
||
|
||
//#region 音乐进度条相关逻辑
|
||
// #ifdef APP-NVUE
|
||
/**
|
||
* 启动第一个音频条动画
|
||
* 实现1.1秒周期的高度变化动画效果
|
||
* @param {Object} barRef 条形元素引用
|
||
* @param {Number} delay 动画延迟时间(ms)
|
||
*/
|
||
start_nvue_height_animation(barRef, delay) {
|
||
if (!barRef) return;
|
||
|
||
const animateBar = () => {
|
||
if (!barRef) return;
|
||
|
||
// 第一阶段：伸长到不同高度
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(2.8)'
|
||
},
|
||
duration: 165, // 1.1s * 0.15
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
if (!barRef) return;
|
||
|
||
// 第二阶段：稍微收缩
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(1.2)'
|
||
},
|
||
duration: 165, // 1.1s * 0.15
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
if (!barRef) return;
|
||
|
||
// 第三阶段：进一步伸长
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(3.5)'
|
||
},
|
||
duration: 165, // 1.1s * 0.15
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
if (!barRef) return;
|
||
|
||
// 第四阶段：收缩到中等高度
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(1.8)'
|
||
},
|
||
duration: 165, // 1.1s * 0.15
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
if (!barRef) return;
|
||
|
||
// 第五阶段：轻微伸长
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(2.2)'
|
||
},
|
||
duration: 165, // 1.1s * 0.15
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
if (!barRef) return;
|
||
|
||
// 第六阶段：回到初始高度
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(1)'
|
||
},
|
||
duration: 165, // 1.1s * 0.15
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
// 随机延迟后继续动画
|
||
const randomDelay = 100 + Math.random() * 500;
|
||
const timer = setTimeout(animateBar, randomDelay);
|
||
this.animationTimers.push(timer);
|
||
});
|
||
});
|
||
});
|
||
});
|
||
});
|
||
});
|
||
};
|
||
|
||
// 初始延迟
|
||
const timer = setTimeout(animateBar, delay);
|
||
this.animationTimers.push(timer);
|
||
},
|
||
|
||
/**
|
||
* 启动第二个音频条动画
|
||
* 实现1.4秒周期的高度变化动画效果
|
||
* @param {Object} barRef 条形元素引用
|
||
* @param {Number} delay 动画延迟时间(ms)
|
||
*/
|
||
start_nvue_height_animation2(barRef, delay) {
|
||
if (!barRef) return;
|
||
|
||
const animateBar = () => {
|
||
if (!barRef) return;
|
||
|
||
// 按照CSS动画的关键帧定义
|
||
const steps = [
|
||
{ scale: 1.5, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 3, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 2, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 4, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 1.2, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 2.5, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 1.7, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 3.2, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 1.4, duration: 140 }, // 1.4s * 0.1
|
||
{ scale: 1, duration: 140 } // 1.4s * 0.1
|
||
];
|
||
|
||
let stepIndex = 0;
|
||
|
||
const executeStep = () => {
|
||
if (stepIndex >= steps.length) {
|
||
// 循环完成，随机延迟后重新开始
|
||
const randomDelay = 100 + Math.random() * 500;
|
||
const timer = setTimeout(animateBar, randomDelay);
|
||
this.animationTimers.push(timer);
|
||
return;
|
||
}
|
||
|
||
const { scale, duration } = steps[stepIndex];
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: `scaleY(${scale})`
|
||
},
|
||
duration: duration,
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
stepIndex++;
|
||
executeStep();
|
||
});
|
||
};
|
||
|
||
executeStep();
|
||
};
|
||
|
||
// 初始延迟
|
||
const timer = setTimeout(animateBar, delay);
|
||
this.animationTimers.push(timer);
|
||
},
|
||
|
||
/**
|
||
* 启动第三个音频条动画
|
||
* 实现0.9秒周期的高度变化动画效果
|
||
* @param {Object} barRef 条形元素引用
|
||
* @param {Number} delay 动画延迟时间(ms)
|
||
*/
|
||
start_nvue_height_animation3(barRef, delay) {
|
||
if (!barRef) return;
|
||
|
||
const animateBar = () => {
|
||
if (!barRef) return;
|
||
|
||
// 按照CSS动画的关键帧定义
|
||
const steps = [
|
||
{ scale: 3.8, duration: 225 }, // 0.9s * 0.25
|
||
{ scale: 1.6, duration: 225 }, // 0.9s * 0.25
|
||
{ scale: 2.6, duration: 225 }, // 0.9s * 0.25
|
||
{ scale: 1, duration: 225 } // 0.9s * 0.25
|
||
];
|
||
|
||
let stepIndex = 0;
|
||
|
||
const executeStep = () => {
|
||
if (stepIndex >= steps.length) {
|
||
// 循环完成，随机延迟后重新开始
|
||
const randomDelay = 100 + Math.random() * 500;
|
||
const timer = setTimeout(animateBar, randomDelay);
|
||
this.animationTimers.push(timer);
|
||
return;
|
||
}
|
||
|
||
const { scale, duration } = steps[stepIndex];
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: `scaleY(${scale})`
|
||
},
|
||
duration: duration,
|
||
timingFunction: 'ease-in-out'
|
||
}, () => {
|
||
stepIndex++;
|
||
executeStep();
|
||
});
|
||
};
|
||
|
||
executeStep();
|
||
};
|
||
|
||
// 初始延迟
|
||
const timer = setTimeout(animateBar, delay);
|
||
this.animationTimers.push(timer);
|
||
},
|
||
|
||
/**
|
||
* 停止所有NVUE动画
|
||
* 清除动画定时器并重置所有音频条到初始状态
|
||
*/
|
||
stop_nvue_animation() {
|
||
// 清除所有定时器
|
||
this.animationTimers.forEach(timer => {
|
||
clearTimeout(timer);
|
||
});
|
||
this.animationTimers = [];
|
||
|
||
// 重置所有条状元素
|
||
const resetBar = (barRef) => {
|
||
if (barRef) {
|
||
this.nvue_animation.transition(barRef, {
|
||
styles: {
|
||
transform: 'scaleY(1)'
|
||
},
|
||
duration: 100
|
||
});
|
||
}
|
||
};
|
||
|
||
// 重置当前所有引用的元素
|
||
this.bar1Ref.forEach(resetBar);
|
||
this.bar2Ref.forEach(resetBar);
|
||
this.bar3Ref.forEach(resetBar);
|
||
},
|
||
// #endif
|
||
//#endregion
|
||
|
||
/**
|
||
* 查看商品详情
|
||
* 点击商品图片或购买按钮时跳转到商品详情页
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
goods_detail(e) {
|
||
const url = e.currentTarget.dataset.url + '&live_room_id=1';
|
||
app.globalData.url_open(url);
|
||
},
|
||
|
||
/**
|
||
* 查看订单
|
||
* 点击订单图标时跳转到用户订单页面
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
goods_order (e) {
|
||
console.log('查看订单');
|
||
app.globalData.url_open('/pages/user-order/user-order');
|
||
},
|
||
|
||
/**
|
||
* 查看购物车
|
||
* 点击购物车图标时跳转到购物车页面
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
goods_cart (e) {
|
||
console.log('查看购物车');
|
||
app.globalData.url_open('/pages/cart-page/cart-page');
|
||
},
|
||
|
||
/**
|
||
* 返回上一页
|
||
*/
|
||
back() {
|
||
app.globalData.page_back_prev_event();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tip-title {
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
.goods-header-fixed {
|
||
position: absolute;
|
||
top: 0;
|
||
left:0;
|
||
z-index: 9;
|
||
}
|
||
.goods-bottom-fixed {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom:0;
|
||
z-index: 8;
|
||
}
|
||
.scroll-type {
|
||
padding: 124rpx 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
.checkbox {
|
||
transform: scale(0.85);
|
||
}
|
||
.goods-item {
|
||
background: #fff;
|
||
margin: 4rpx 2px 16rpx 2px;
|
||
padding: 30rpx 40rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 2px 2px 4px 2px #0000000d;
|
||
.goods-item-image-container {
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
.goods-item-title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
.goods-item-content {
|
||
height: 120rpx;
|
||
}
|
||
.goods-item-popup-content {
|
||
height: 200rpx;
|
||
}
|
||
}
|
||
|
||
.goods-item-popup-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.goods-item-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.image-top-index {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 4rpx 16rpx;
|
||
border-top-left-radius: 10rpx;
|
||
border-bottom-right-radius: 10rpx;
|
||
z-index: 3;
|
||
}
|
||
/* #ifdef APP-NVUE */
|
||
.select-all {
|
||
margin-left: 6rpx;
|
||
}
|
||
/* #endif */
|
||
|
||
.music-progress-container {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
padding: 10rpx 0;
|
||
border-bottom-left-radius: 10rpx;
|
||
border-bottom-right-radius: 10rpx;
|
||
z-index: 3;
|
||
}
|
||
|
||
.music-progress-bars {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: flex-end; /* 底部对齐 */
|
||
height: 20rpx;
|
||
}
|
||
|
||
.music-bar {
|
||
width: 4rpx;
|
||
height: 4rpx; /* 初始高度较小 */
|
||
background-color: #fff;
|
||
margin: 0 4rpx;
|
||
transform-origin: bottom; /* 以底部为变换中心 */
|
||
}
|
||
|
||
.nvue-bar {
|
||
width: 4rpx;
|
||
height: 6rpx;
|
||
background-color: #fff;
|
||
margin: 0 4rpx;
|
||
transform-origin: bottom; /* 以底部为变换中心 */
|
||
}
|
||
|
||
// #ifndef APP-NVUE
|
||
.bar1 {
|
||
animation: beat1 1.1s infinite ease-in-out;
|
||
}
|
||
|
||
.bar2 {
|
||
animation: beat2 1.4s infinite ease-in-out;
|
||
}
|
||
|
||
.bar3 {
|
||
animation: beat3 0.9s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes beat1 {
|
||
0% {
|
||
transform: scaleY(1);
|
||
}
|
||
15% {
|
||
transform: scaleY(2.8);
|
||
}
|
||
30% {
|
||
transform: scaleY(1.2);
|
||
}
|
||
45% {
|
||
transform: scaleY(3.5);
|
||
}
|
||
60% {
|
||
transform: scaleY(1.8);
|
||
}
|
||
75% {
|
||
transform: scaleY(2.2);
|
||
}
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
@keyframes beat2 {
|
||
0% {
|
||
transform: scaleY(1);
|
||
}
|
||
10% {
|
||
transform: scaleY(1.5);
|
||
}
|
||
20% {
|
||
transform: scaleY(3);
|
||
}
|
||
30% {
|
||
transform: scaleY(2);
|
||
}
|
||
40% {
|
||
transform: scaleY(4);
|
||
}
|
||
50% {
|
||
transform: scaleY(1.2);
|
||
}
|
||
60% {
|
||
transform: scaleY(2.5);
|
||
}
|
||
70% {
|
||
transform: scaleY(1.7);
|
||
}
|
||
80% {
|
||
transform: scaleY(3.2);
|
||
}
|
||
90% {
|
||
transform: scaleY(1.4);
|
||
}
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
@keyframes beat3 {
|
||
0% {
|
||
transform: scaleY(1);
|
||
}
|
||
25% {
|
||
transform: scaleY(3.8);
|
||
}
|
||
50% {
|
||
transform: scaleY(1.6);
|
||
}
|
||
75% {
|
||
transform: scaleY(2.6);
|
||
}
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
// #endif
|
||
</style> |