防疫浮窗

src/assets/scss/modules/wx-mini/index-set.scss

@@ -108,7 +108,7 @@
 			}
 
 			.mw-phone {
-        margin: 50px auto;
+				margin: 50px auto;
 				min-height: 540px;
 				// box-shadow: 0 0 0 8px rgba(#000, 0.1);
 				.d-cpt-operate {
@@ -129,8 +129,8 @@
 			position: relative;
 			margin: 0 auto;
 			width: 375px;
-      height: 700px;
-      overflow: auto;
+			height: 700px;
+			overflow: auto;
 			background-color: #ffffff;
 			// background-color: #f7f6f9;
 			box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);
@@ -195,6 +195,17 @@
 				// border-radius: 50px 0 0 50px;
 				// background-color: #ffffff;
 			}
+			.mw-phone-fixed2 {
+				// @include bs1;
+				position: absolute;
+				z-index: 1000;
+				top: 220px;
+				right: 0;
+				width: 141px * 0.5;
+				height: 164px * 0.5;
+				// border-radius: 50px 0 0 50px;
+				// background-color: #ffffff;
+			}
 			.mw-phone-top {
 				position: relative;
 				height: 40px;
@@ -242,7 +253,7 @@
 					border: 1px solid #bb5;
 					background-color: #ffffff;
 					text-align: center;
-          z-index: 1000;
+					z-index: 1000;
 					&.z-small {
 						height: 71px;
 					}
@@ -301,7 +312,20 @@
 						}
 					}
 				}
-        
+
+				.mw-cpt-fangyi {
+					position: relative;
+
+					.d-cpt-wrap {
+						width: 141px * 0.5;
+						height: 164px * 0.5;
+						img {
+							width: 141px * 0.5;
+							height: 164px * 0.5;
+						}
+					}
+				}
+
 				.mw-cpt-cnt_menus {
 					position: relative;
 					margin-top: 10px;
@@ -340,80 +364,75 @@
 									color: rgba(51, 51, 51, 1);
 								}
 							}
-
 						}
 					}
-        }
+				}
 
-        // 更多功能2
-        .mw-cpt-cnt_function2 {
+				// 更多功能2
+				.mw-cpt-cnt_function2 {
 					position: relative;
 					margin-top: 10px;
 
 					.d-cpt-wrap {
-            border-radius: 10px;
+						border-radius: 10px;
 						// overflow-x: scroll;
 						overflow: hidden;
-            margin: 0 13px;
-            padding:0 0 13px 0;
-            background-color: white;
-				
-            .link {
-              width: 100%;
-              position: relative;
-
-              .link-item{
-                display: inline;
-                position: relative;
-
-                > img {
-                  width:45%;
-                  // width: 308px;
-                  margin: 8px;
-                  // height: 160px;
-                  border-radius: 10px;
-                }
-                span {
-                  position: absolute;
-                  top: -10px;
-                  left: 20px;
-                  color: #fff;
-                  font-size: 15px;
-                  font-family: PingFang SC;
-                  font-weight: bold;
-                  color: #ffffff;
-                }
-              }
-
-              
-            }
-            
-            .dots {
-              position: absolute;
-              bottom: 10px;
-              left: 0;
-              right: 0;
-              width: 100%;
-              display: flex;
-              justify-content: center;
-          
-              .dot {
-                margin: 0 5px;
-                width: 20px;
-                height: 4px;
-                border-radius: 6px;
-                background-color: #ddd;
-                transition: all ease $ad1;
-          
-                &.z-on {
-                  background-color: $c1;
-                }
-              }
-            }
-				
-					}
-        }
+						margin: 0 13px;
+						padding: 0 0 13px 0;
+						background-color: white;
 
+						.link {
+							width: 100%;
+							position: relative;
+
+							.link-item {
+								display: inline;
+								position: relative;
+
+								> img {
+									width: 45%;
+									// width: 308px;
+									margin: 8px;
+									// height: 160px;
+									border-radius: 10px;
+								}
+								span {
+									position: absolute;
+									top: -10px;
+									left: 20px;
+									color: #fff;
+									font-size: 15px;
+									font-family: PingFang SC;
+									font-weight: bold;
+									color: #ffffff;
+								}
+							}
+						}
+
+						.dots {
+							position: absolute;
+							bottom: 10px;
+							left: 0;
+							right: 0;
+							width: 100%;
+							display: flex;
+							justify-content: center;
+
+							.dot {
+								margin: 0 5px;
+								width: 20px;
+								height: 4px;
+								border-radius: 6px;
+								background-color: #ddd;
+								transition: all ease $ad1;
+
+								&.z-on {
+									background-color: $c1;
+								}
+							}
+						}
+					}
+				}
 			}
 		}
 	}
@@ -473,28 +492,28 @@
 		.d-operate {
 			padding: 20px 0;
 			text-align: right;
-    }
+		}
 	}
 }
 
 .d-set-banners {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 10px;
-  .upload-demos {
-    display: block;
-    width: 20px;
-    height: 20px;
-    color: #ccc;
-    text-align: center;
-    line-height: 18px;
-    border: 1px dashed #ccc;
-    overflow: hidden;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    -moz-border-radius: 50%;
-    -ms-border-radius: 50%;
-    -o-border-radius: 50%;
-}
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 10px;
+	.upload-demos {
+		display: block;
+		width: 20px;
+		height: 20px;
+		color: #ccc;
+		text-align: center;
+		line-height: 18px;
+		border: 1px dashed #ccc;
+		overflow: hidden;
+		border-radius: 50%;
+		-webkit-border-radius: 50%;
+		-moz-border-radius: 50%;
+		-ms-border-radius: 50%;
+		-o-border-radius: 50%;
+	}
 }

src/components/wx-index/cpt-item.vue

@@ -22,6 +22,19 @@
       </div>
     </div>
 
+    <!-- 防疫组件 -->
+    <div class="mw-cpt-fangyi"
+         v-else-if="item.componentFrontId==='resi-functionList-extend-fangyiFloat'">
+      <div class="d-cpt-wrap">
+        <img v-if="item.demoData.ico"
+             :src="item.demoData.ico"
+             mode="aspectFill">
+        <img v-else
+             src="@/assets/img/modules/wx-mini/index-set/fangyi-btn.png"
+             mode="aspectFill">
+      </div>
+    </div>
+
     <!-- 爱心互助 -->
     <heart v-else-if="item.componentFrontId==='resi-functionList-heart-banner'
             ||item.componentFrontId==='resi-functionList-heart-new'