前端工作总结106-小程序学习2开始布局页面2

<template>
  <view class="box u-p-l-35 u-p-r-35 ">
    <view class="title">
      <text>
        请选择您要管理的市场
      text>
    view>
    <view :class=" ['u-flex','u-row-center',{'choose_market': selectIndex ==0},{'market' : selectIndex != 0}] " @click="choose(0)">
      <view class=" u-row-center  ">
        苏州花开农创智慧科技
      view>
    view>
    <view :class=" ['u-flex','u-row-center',{'choose_market' : selectIndex == 1},{'market' : selectIndex != 1}] " @click="choose(1)"
     style="justify-content: center;">
      <text class="u-row-center">
        长江农副产品综合市场
      text>
    view>
    <view :class=" ['u-flex','u-row-center',{'choose_market' : selectIndex == 2},{'market' : selectIndex != 2 }] " @click="choose(2)">
      <text>
        体育路农贸市场
      text>
    view>
    <u-button class="determine">确定u-button>
  view>
template>
 
<script>
  export default {
    data() {
      return {
        selectIndex: 0
      }
    },
    methods: {
      //提交
      sub: function() {},
      //切换
      choose: function(e) {
        this.selectIndex = e
      },
 
    },
 
  }
script>
 
<style lang="scss">
  .box {
    background-color: white;
 
    .title {
      color: #333333;
      font-size: 34rpx;
      margin-bottom: 50rpx;
      padding-top: 224rpx;
    }
 
    .choose_market {
      width: 100%;
      height: 120rpx;
      background: #F0F8FC;
      border: 2rpx solid #1FB5FE;
      opacity: 1;
      border-radius: 8rpx;
      font-size: 30rpx;
      font-family: PingFangSC;
      font-weight: 400;
      line-height: 40rpx;
      color: #1FB5FE;
      margin-bottom: 30rpx;
    }
 
    .market {
      width: 100%;
      height: 120rpx;
      background: #F1F1F1;
      opacity: 1;
      border-radius: 8rpx;
 
      font-size: 30rpx;
      font-family: PingFangSC;
      font-weight: 400;
      line-height: 40rpx;
      color: #666666;
      margin-bottom: 30rpx;
 
    }
 
    .determine {
      width: 684rpx;
      height: 96rpx;
      background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);
      border-radius: 66rpx;
      font-size: 36rpx;
      font-family: PingFangSC;
      font-weight: 400;
      line-height: 40rpx;
      color: #FFFFFF;
      opacity: 1;
      position: absolute;
      bottom: 18rpx;
    }
  }
style>