前端工作小结86-小程序学习4开始布局页面4

<template>
  <view class=" content">
    <div style="float: left; width: 477rpx;margin-bottom: 24rpx;">
      <div class="u-flex module_sm blue_module" style="margin-right: 25rpx;">
        <u-image class="module_icon" width="60rpx" height="60rpx" src="../../static/marker_information/jbxx_icon.png"></u-image>
        <view class="market_font ">
          基本信息
        </view>
      </div>
      <div class="u-flex module_sm jhuang_module">
        <u-image class="module_icon" width="60rpx" height="60rpx" src="../../static/marker_information/scry_icon.png"></u-image>
        <view class="market_font ">
          荣誉市场
        </view>
      </div>
      <div class="u-flex module_big shichang_bg">
        <u-image class="module_icon" width="60rpx" height="60rpx" src="../../static/marker_information/scjs_icon.png"></u-image>
        <view class="market_font">
          市场介绍
        </view>
      </div>
    </div>
    <div class="u-flex module_big_col">
      <u-image class="module_icon_big" width="60rpx" height="60rpx" src="../../static/marker_information/scdt_icon.png"></u-image>
      <view class="market_font">
        市场地图
      </view>
    </div>
    <div style="clear: both;"></div>
    <div class="u-flex module_sm jhong_module">
      <u-image style="margin-top: 30rpx; margin-bottom: 20rpx;" width="60rpx" height="60rpx" src="../../static/marker_information/xfs_icon.png"></u-image>
      <view class="market_font ">
        消防栓
      </view>
    </div>
    <div class="module_big  tanwei_bg"></div>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .content {
    padding: 0 30rpx;
    .module_sm {
      width: 214rpx;
      height: 192rpx;
      opacity: 1;
      border-radius: 8rpx;
      flex-direction: column;
      margin-right: 25rpx;
      margin-bottom: 24rpx;
      float: left;
      .module_icon {
        margin-top: 30rpx;
        margin-bottom: 20rpx;
      }
      .market_font {
        font-size: 24rpx;
        font-family: PingFangSC;
        font-weight: 400;
        line-height: 33rpx;
        color: #FFFFFF;
        opacity: 1;
        letter-spacing: 3rpx;
      }
    }
    .module_big {
      width: 452rpx;
      height: 192rpx;
      background-size: 452rpx 192rpx;
      background-repeat: no-repeat;
      float: left;
      flex-direction: column;
      .market_font {
        font-size: 24rpx;
        font-family: PingFangSC;
        font-weight: 400;
        line-height: 33rpx;
        color: #FFFFFF;
        opacity: 1;
        letter-spacing: 3rpx;
      }
      .module_icon {
        margin-top: 30rpx;
        margin-bottom: 20rpx;
      }
    }
    .shichang_bg {
      background-image: url(../../static/marker_information/scjs_bg.png);
    }
    .tanwei_bg {
      background-image: url(../../static/marker_information/twh_bg.png);
    }
    .module_big_col {
      width: 214rpx;
      height: 408rpx;
      background: linear-gradient(180deg, #3DD5FE 0%, #05B1FA 100%);
      opacity: 1;
      border-radius: 8rpx;
      float: left;
      flex-direction: column;
      .module_icon_big{
        margin-top: 145rpx;
      }
      .market_font {
        font-size: 24rpx;
        font-family: PingFangSC;
        font-weight: 400;
        line-height: 33rpx;
        color: #FFFFFF;
        opacity: 1;
        letter-spacing: 3rpx;
      }
    }
    .blue_module {
      background: linear-gradient(180deg, #70C7F2 0%, #24B4F2 100%);
    }
    .jhuang_module {
      background: linear-gradient(180deg, #F8B87A 0%, #F88213 100%);
    }
    .jhong_module {
      background: linear-gradient(180deg, #FA946B 0%, #FA682E 100%);
    }
  }
</style>