From d57b0ce147b1464168a7ebb3fb145eff48240379 Mon Sep 17 00:00:00 2001 From: taiwan Date: Mon, 28 Mar 2022 17:45:36 +0800 Subject: [PATCH] 天美对比功能优化-直播组件排版 --- app.wxss | 10 +++++++--- components/diy_live/diy_live.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ components/diy_live/diy_live.json | 4 ++++ components/diy_live/diy_live.wxml | 15 +++++++++++++++ components/diy_live/diy_live.wxss | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 components/diy_live/diy_live.js create mode 100644 components/diy_live/diy_live.json create mode 100644 components/diy_live/diy_live.wxml create mode 100644 components/diy_live/diy_live.wxss diff --git a/app.wxss b/app.wxss index a02ca49..3bacdb3 100644 --- a/app.wxss +++ b/app.wxss @@ -744,9 +744,13 @@ background: #ffe3e2; /* 图标字体(ty) */ @font-face { font-family: 'iconfont'; /* Project id 2054717 */ - src: url('//at.alicdn.com/t/font_2054717_aefpqs97v86.woff2?t=1647056245887') format('woff2'), - url('//at.alicdn.com/t/font_2054717_aefpqs97v86.woff?t=1647056245887') format('woff'), - url('//at.alicdn.com/t/font_2054717_aefpqs97v86.ttf?t=1647056245887') format('truetype'); + src: url('//at.alicdn.com/t/font_2054717_7asl31h61km.woff2?t=1648457743336') format('woff2'), + url('//at.alicdn.com/t/font_2054717_7asl31h61km.woff?t=1648457743336') format('woff'), + url('//at.alicdn.com/t/font_2054717_7asl31h61km.ttf?t=1648457743336') format('truetype'); +} + +.icon-zhibo:before { + content: "\e623"; } .icon-kefu1:before { diff --git a/components/diy_live/diy_live.js b/components/diy_live/diy_live.js new file mode 100644 index 0000000..2fb8f34 --- /dev/null +++ b/components/diy_live/diy_live.js @@ -0,0 +1,60 @@ +Component({ + options: { + multipleSlots: true // 在组件定义时的选项中启用多slot支持 + }, + /** + * 组件的属性列表 + * 用于组件自定义设置 + */ + properties: { + // 弹窗标题 + // showHongbao: { // 属性名 + // type: Boolean, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) + // value: false // 属性初始值(可选),如果未指定则会根据类型选择一个 + // }, + url: { + type: String, + }, + }, + + /** + * 私有数据,组件的初始数据 + * 可用于模版渲染 + */ + data: { + // 弹窗显示控制 + showHongbao:false, + showHongbaoSmall: false, + }, + + /** + * 组件的方法列表 + * 更新属性和数据的方法与更新页面数据的方法类似 + */ + methods: { + /* + * 公有方法 + */ + + // 关闭首页抢红包主弹窗,显示侧边栏抢红包小图标 + closeHongbao() { + this.setData({ + showHongbao: false, //关闭抢红包主弹窗 + showHongbaoSmall: true, //显示抢红包小图标 + }); + }, + + /* + * 内部私有方法建议以下划线开头 + * triggerEvent 用于触发事件 + */ + _showHongbao(){ + //触发取消回调 + this.triggerEvent("showHongbao") + }, + _closeHongbao(){ + //触发成功回调 + this.triggerEvent("closeHongbao"); + } + } +}) \ No newline at end of file diff --git a/components/diy_live/diy_live.json b/components/diy_live/diy_live.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/components/diy_live/diy_live.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/diy_live/diy_live.wxml b/components/diy_live/diy_live.wxml new file mode 100644 index 0000000..3a73ee2 --- /dev/null +++ b/components/diy_live/diy_live.wxml @@ -0,0 +1,15 @@ + + + + + + + + 直播 + + + + + + 直播组件 + diff --git a/components/diy_live/diy_live.wxss b/components/diy_live/diy_live.wxss new file mode 100644 index 0000000..9f6e80e --- /dev/null +++ b/components/diy_live/diy_live.wxss @@ -0,0 +1,46 @@ +@import '../../app.wxss'; + +.suspend { + width: 180rpx; + height: 260rpx; + position: fixed; + right: 10rpx; + top: 10rpx; + background-color: #f0f0f0; + z-index: 999; +} + +.close-box { + position: absolute; + top: 0; + right: 0; + padding: 4rpx; + background-color: rgba(0, 0, 0, .5); + color: white; +} + +.close-box .icon-guan { + font-size: 26rpx; + display: block; + padding: 0 4rpx; +} + +.zhibo-box { + position: absolute; + bottom: 0; + width: 100%; + color: white; + background-color: #e7006d; +} + +.img { + display: block; + width: 100%; + height: 100%; +} + + +.tile { + height: 400rpx; + background-color: skyblue; +} \ No newline at end of file -- libgit2 0.21.4