小程序首页界面加电子门牌

pages/index/index.wxml

@@ -41,9 +41,11 @@
     </view>
   <view class="electron">
     <view class="door">
+      <image src="../../images/index/door.png" class="img_door"></image>
       <text class="door-text" bindtap="door">扫电子门牌</text>
     </view>
     <view class="electron_card">
+    <image src="../../images/index/iDcard.png" class="img_door"></image>
      <text class="card_text"  bind:tap="door">识别身份证</text>
     </view>
   </view>

pages/index/index.wxss

@@ -1,188 +1,12 @@
-/**index.wxss**/
-/* .select{
-    width: 100%;
-    height: 90rpx;
-    background-color: #fff;
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 0 40rpx;
-    align-items: center;
-}
-.select view {
-    display: flex;
-    align-items: center;
-    font-size: 30rpx;
-    font-family: PingFang SC;
-    font-weight: 500;
-    color: #3A80E7;
-}
-.select view image{
-    width: 16rpx;
-    height: 16rpx;
-    margin: 0 9rpx;
-}
-.select .delete {
-    font-size: 28rpx;
-    font-family: PingFang SC;
-    font-weight: 500;
-    color: #999999;
-}
-.select .delete image{
-    width: 30rpx;
-    height: 30rpx;
-}
-.content{
-   width: 100%;
-   display: flex;
-   height: auto;
-    flex-direction: column;   
-    justify-content: flex-center;
-    margin: 30rpx 20rpx 0 30rpx; 
-}
-/* .content .scroll {
-     height: calc(100vh - 130rpx); 
-*/
 
-/* .box{
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-}
-.hd_news{
-  display: flex;
-  flex-direction:row;
-  justify-content: space-between;
-  margin: 20rpx 20rpx 0 30rpx
-}
-.hd_news .reminder{
-  width: 134rpx;
-  height: 33rpx;
-  overflow-wrap: break-word;
-  color: rgba(51,51,51,1);
-  font-size: 34rpx;
-  font-family: PingFang-SC-Bold;
-  font-weight: 700;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 52rpx;
-
-}
- .card{
-    width: 100%;
-    display: flex;
-    height: 168rpx;
-    margin: 20rpx 0 0 10rpx;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-    flex-direction: column;
-}
-
-.content .card::before{
-    content: "";
-    position: absolute;
-    left: 30rpx;  
-    right: 30rpx;
-    bottom: 0;
-    border-bottom: 2rpx solid #EAEAEA;
-}
-
-.blue{
-    color:#5693EE;
-}
-.yellow{
-    color:#E2944D;
-}
-.cyan{
-    color: #2EB4F2 ;
-}
-.cyanBg{
-    background: rgba(56,189,253,0.1);
-}
-.yellowBg{
-    background: rgba(248,188,122,0.1);
-}
-.blueBg{
-    background: rgba(86,147,238,0.1);
-}
-.gray{
-    color: #999999 !important;
-}
-.content .card .left{
-    width: 100rpx;
-    height: 100rpx;
-    background: linear-gradient(0deg, #3E8DF8 0%, #68A8FD 100%);
-    border-radius: 20rpx;
-    color:#fff ;
-    font-size: 28rpx;
-    font-family: PingFang SC;
-    font-weight: 500;
-    text-align: center;
-    line-height: 100rpx;
-}
-.content .card .right{
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-    margin-left: 24rpx;
-}
-.content .card .right .top{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.content .card .right .title{
-    font-size: 32rpx;
-    font-family: PingFang SC;
-    font-weight: 500;
-    color: #333333;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: calc(100% - 80rpx);
-}
-
-
-.content .card  .right .bottom{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 28rpx;
-    font-family: PingFang SC;
-    color: #999999;
-}
-.textOver{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 250rpx;
-}
-.content .card  .right .bottom .flex_box{
-    display: flex;
-    justify-content: left;
-} */
-/* .bgBule{
-    background-color: #dfebfb;
-    border: 1px solid #3A80E7;
-    border-radius: 32rpx;
-    padding:10rpx 20rpx;
-    box-sizing: border-box;
-}
-.bgBule image{
-    margin-left: 50rpx !important;
-}  */
-.page {
+page {
   overflow: hidden;
   position: relative;
   width: 750rpx;
   height: auto;
   display: flex;
   flex-direction: column;
-  background-color: #F7F7F7;
+  background-color: #f7f7f7;
   /* z-index: -9999; */
 }
 .header {
@@ -458,7 +282,7 @@
   height: 412rpx;
   display: flex;
   flex-direction: column;
-  margin: 36rpx 0 0 30rpx;
+  margin: 20rpx 0 0 30rpx;
 }
 .text-wrapper_1 {
   background-color: rgba(255,255,255,1.000000);
@@ -1119,39 +943,45 @@ line-height: 40rpx;
 }
 .electron{
   position:relative;
-  width: 100%;
+  width: 690rpx;
   height: 100rpx;
   display: flex;
   flex-direction:row;
   justify-content: space-between;
-  align-items: center;
-
+  margin: 21rpx 0 0 30rpx;
 }
 .door{
-  margin: 50rpx 0 0 30rpx;
   display:flex;
-  width: 300rpx;
-  height: 90rpx;
-  background-color: #3da2ff;
+  width: 335rpx;
+  height: 100rpx;
   border-radius: 20rpx;
   justify-content: center;
   align-items: center;
+  background-color: #FFFFFF;
 }
 .door .door-text{
-  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   font-size: 32rpx;
+  margin-left: 20rpx;
+  
+}
+.img_door{
+  height: 44rpx;
+  width: 44rpx;
+
 }
 .electron_card{
-  margin: 50rpx 60rpx 0 30rpx;
   display:flex;
-  width: 300rpx;
-  height: 90rpx;
-  background-color: #3da2ff;
+  width: 335rpx;
+  height: 100rpx;
+  background-color: #ffffff;
   border-radius: 20rpx;
   justify-content: center;
   align-items: center;
 }
 .card_text{
-  color:white;
+  margin-left: 20rpx;
   font-size: 32rpx;
 }