欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序——個(gè)人中心——view在最前面——一行四個(gè)排列 - 新聞資訊 - 云南小程序開(kāi)發(fā)|云南軟件開(kāi)發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開(kāi)發(fā)/軟件開(kāi)發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

微信小程序——個(gè)人中心——view在最前面——一行四個(gè)排列

發(fā)表時(shí)間：2020-10-19

發(fā)布人：葵宇科技

瀏覽次數(shù)：192

效果圖：
在這里插入圖片描述

js代碼：無(wú)

json代碼：

{
  "navigationBarBackgroundColor": "#4ca1fb",
  "usingComponents": {}
}

wxml代碼：

<!--pages/jiaocheng/jiaocheng.wxml-->
<view class='container'>
  <!-- 第1部分 -->
  <view class='top-container'>
    <image class='bg-img' src='../images/backmy.png'></image>
  </view>
  <!-- 第2部分 -->
  <view class='middle-container'>
    <view class="view_2">
      <view class="view_tupianwenzi">
        <image class="image_tupian" src="../images/badge.png"></image>
        <text class="text_1">打車</text>
      </view>
      <view class="view_tupianwenzi" bindtap="webViewAll" id="2">
        <image class="image_tupian" src="../images/card.png"></image>
        <text class="text_1">門(mén)票</text>
      </view>

      <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
        <image class="image_tupian" src="../images/color.png"></image>
        <text class="text_1">酒店</text>
      </view>
      <view class="view_tupianwenzi" bindtap="webViewAll" id="6">
        <image class="image_tupian" src="../images/flex.png"></image>
        <text class="text_1">更多</text>
      </view>
    </view>

  </view>

  <!-- 第3部分 -->
  <view class='bottom-container'>
    <view class='middle-item' hover-stay-time="150">
      <text class='middle-tag'>設(shè)置</text>
    </view>

    <view class='middle-item' hover-class="opcity" hover-stay-time="150">
      <text class='middle-tag'>個(gè)人</text>
    </view>
  </view>


</view>

wxss代碼：

.container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(240, 240, 240);
  z-index: -2;
}

.top-container {
  height: 440rpx;
  position: relative;
  display: flex;
  flex-direction: column;
}

.bg-img {
  position: absolute;
  width: 100%;
  height: 440rpx;
  z-index: -1;
}

/* 中間--我的訂單 */
.middle-container {
  height: 200rpx;
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border-radius: 20rpx;
  background-color: #FFFFFF;
  margin: -80rpx 30rpx 26rpx 30rpx;
  box-shadow: 0 15rpx 10rpx -15rpx #efefef;

}

.middle-item {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.middle-tag {
  margin: 0rxp 200rpx 0rpx 200rpx;
  font-size: 28rpx;
  color: #333333;
  line-height: 28rpx;
  font-weight: bold;
  padding-left: 22rpx;
}

.view_2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.text_1 {
  font-size: 30rpx;
}

.view_tupianwenzi {
  display: flex;
  flex-direction: column;
  width: 130rpx;
  align-items: center;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.image_tupian {
  display: flex;
  width: 80rpx;
  height: 80rpx;
}

/* 最底部 */
.bottom-container {
  height: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10rpx;
  background-color: #FFFFFF;
  margin: 0rpx 30rpx 26rpx 30rpx;
  box-shadow: 0 15rpx 10rpx -15rpx #efefef;
}