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 |