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

简介: 前端工作总结105-小程序学习1开始布局页面
<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>

image.png

相关文章
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
13天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
33 18
|
10天前
|
移动开发 小程序 前端开发
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
29 1
|
10天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
25 1
|
18天前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
52 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
21天前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
75 0
前端新机遇!为什么我建议学习鸿蒙?
|
24天前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
28 1
|
27天前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
19 1
|
2月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。