天美对比功能优化-直播组件排版

后端研发-苏泰源
1 parent 437c2dc6
Showing 5 changed files with 132 additions and 3 deletions
app.wxss
components/diy_live/diy_live.js
components/diy_live/diy_live.json
components/diy_live/diy_live.wxml
components/diy_live/diy_live.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 {
+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
+{
+  "component": true,
+  "usingComponents": {}
+}
 \ No newline at end of file
+<!-- 悬浮式 -->
+<view class="live-container suspend">
+	<view class="close-box">
+		<text class="iconfont icon-guan"></text>
+	</view>
+	<image class="img" src="../../images/share/default_g_img.gif" mode="aspectFit"></image>
+	<view class="zhibo-box t-c fs26">
+		<text class="iconfont icon-zhibo"></text> 直播
+	</view>
+</view>
+
+<!-- 平铺式 -->
+<view class="tile">
+	直播组件
+</view>
+@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