Commit d57b0ce147b1464168a7ebb3fb145eff48240379
1 parent
437c2dc6
天美对比功能优化-直播组件排版
Showing
5 changed files
with
132 additions
and
3 deletions
app.wxss
| @@ -744,9 +744,13 @@ background: #ffe3e2; | @@ -744,9 +744,13 @@ background: #ffe3e2; | ||
| 744 | /* 图标字体(ty) */ | 744 | /* 图标字体(ty) */ |
| 745 | @font-face { | 745 | @font-face { |
| 746 | font-family: 'iconfont'; /* Project id 2054717 */ | 746 | font-family: 'iconfont'; /* Project id 2054717 */ |
| 747 | - src: url('//at.alicdn.com/t/font_2054717_aefpqs97v86.woff2?t=1647056245887') format('woff2'), | ||
| 748 | - url('//at.alicdn.com/t/font_2054717_aefpqs97v86.woff?t=1647056245887') format('woff'), | ||
| 749 | - url('//at.alicdn.com/t/font_2054717_aefpqs97v86.ttf?t=1647056245887') format('truetype'); | 747 | + src: url('//at.alicdn.com/t/font_2054717_7asl31h61km.woff2?t=1648457743336') format('woff2'), |
| 748 | + url('//at.alicdn.com/t/font_2054717_7asl31h61km.woff?t=1648457743336') format('woff'), | ||
| 749 | + url('//at.alicdn.com/t/font_2054717_7asl31h61km.ttf?t=1648457743336') format('truetype'); | ||
| 750 | +} | ||
| 751 | + | ||
| 752 | +.icon-zhibo:before { | ||
| 753 | + content: "\e623"; | ||
| 750 | } | 754 | } |
| 751 | 755 | ||
| 752 | .icon-kefu1:before { | 756 | .icon-kefu1:before { |
components/diy_live/diy_live.js
0 → 100644
| 1 | +Component({ | ||
| 2 | + options: { | ||
| 3 | + multipleSlots: true // 在组件定义时的选项中启用多slot支持 | ||
| 4 | + }, | ||
| 5 | + /** | ||
| 6 | + * 组件的属性列表 | ||
| 7 | + * 用于组件自定义设置 | ||
| 8 | + */ | ||
| 9 | + properties: { | ||
| 10 | + // 弹窗标题 | ||
| 11 | + // showHongbao: { // 属性名 | ||
| 12 | + // type: Boolean, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） | ||
| 13 | + // value: false // 属性初始值（可选），如果未指定则会根据类型选择一个 | ||
| 14 | + // }, | ||
| 15 | + url: { | ||
| 16 | + type: String, | ||
| 17 | + }, | ||
| 18 | + }, | ||
| 19 | + | ||
| 20 | + /** | ||
| 21 | + * 私有数据,组件的初始数据 | ||
| 22 | + * 可用于模版渲染 | ||
| 23 | + */ | ||
| 24 | + data: { | ||
| 25 | + // 弹窗显示控制 | ||
| 26 | + showHongbao:false, | ||
| 27 | + showHongbaoSmall: false, | ||
| 28 | + }, | ||
| 29 | + | ||
| 30 | + /** | ||
| 31 | + * 组件的方法列表 | ||
| 32 | + * 更新属性和数据的方法与更新页面数据的方法类似 | ||
| 33 | + */ | ||
| 34 | + methods: { | ||
| 35 | + /* | ||
| 36 | + * 公有方法 | ||
| 37 | + */ | ||
| 38 | + | ||
| 39 | + // 关闭首页抢红包主弹窗，显示侧边栏抢红包小图标 | ||
| 40 | + closeHongbao() { | ||
| 41 | + this.setData({ | ||
| 42 | + showHongbao: false, //关闭抢红包主弹窗 | ||
| 43 | + showHongbaoSmall: true, //显示抢红包小图标 | ||
| 44 | + }); | ||
| 45 | + }, | ||
| 46 | + | ||
| 47 | + /* | ||
| 48 | + * 内部私有方法建议以下划线开头 | ||
| 49 | + * triggerEvent 用于触发事件 | ||
| 50 | + */ | ||
| 51 | + _showHongbao(){ | ||
| 52 | + //触发取消回调 | ||
| 53 | + this.triggerEvent("showHongbao") | ||
| 54 | + }, | ||
| 55 | + _closeHongbao(){ | ||
| 56 | + //触发成功回调 | ||
| 57 | + this.triggerEvent("closeHongbao"); | ||
| 58 | + } | ||
| 59 | + } | ||
| 60 | +}) | ||
| 0 | \ No newline at end of file | 61 | \ No newline at end of file |
components/diy_live/diy_live.json
0 → 100644
components/diy_live/diy_live.wxml
0 → 100644
| 1 | +<!-- 悬浮式 --> | ||
| 2 | +<view class="live-container suspend"> | ||
| 3 | + <view class="close-box"> | ||
| 4 | + <text class="iconfont icon-guan"></text> | ||
| 5 | + </view> | ||
| 6 | + <image class="img" src="../../images/share/default_g_img.gif" mode="aspectFit"></image> | ||
| 7 | + <view class="zhibo-box t-c fs26"> | ||
| 8 | + <text class="iconfont icon-zhibo"></text> 直播 | ||
| 9 | + </view> | ||
| 10 | +</view> | ||
| 11 | + | ||
| 12 | +<!-- 平铺式 --> | ||
| 13 | +<view class="tile"> | ||
| 14 | + 直播组件 | ||
| 15 | +</view> |
components/diy_live/diy_live.wxss
0 → 100644
| 1 | +@import '../../app.wxss'; | ||
| 2 | + | ||
| 3 | +.suspend { | ||
| 4 | + width: 180rpx; | ||
| 5 | + height: 260rpx; | ||
| 6 | + position: fixed; | ||
| 7 | + right: 10rpx; | ||
| 8 | + top: 10rpx; | ||
| 9 | + background-color: #f0f0f0; | ||
| 10 | + z-index: 999; | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +.close-box { | ||
| 14 | + position: absolute; | ||
| 15 | + top: 0; | ||
| 16 | + right: 0; | ||
| 17 | + padding: 4rpx; | ||
| 18 | + background-color: rgba(0, 0, 0, .5); | ||
| 19 | + color: white; | ||
| 20 | +} | ||
| 21 | + | ||
| 22 | +.close-box .icon-guan { | ||
| 23 | + font-size: 26rpx; | ||
| 24 | + display: block; | ||
| 25 | + padding: 0 4rpx; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +.zhibo-box { | ||
| 29 | + position: absolute; | ||
| 30 | + bottom: 0; | ||
| 31 | + width: 100%; | ||
| 32 | + color: white; | ||
| 33 | + background-color: #e7006d; | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +.img { | ||
| 37 | + display: block; | ||
| 38 | + width: 100%; | ||
| 39 | + height: 100%; | ||
| 40 | +} | ||
| 41 | + | ||
| 42 | + | ||
| 43 | +.tile { | ||
| 44 | + height: 400rpx; | ||
| 45 | + background-color: skyblue; | ||
| 46 | +} | ||
| 0 | \ No newline at end of file | 47 | \ No newline at end of file |