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

简介: 前端工作总结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>

image.png

相关文章
|
22天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0
|
7天前
|
小程序 前端开发 数据可视化
作为一个前端小白,我竟然搞定了一个小程序的交付
作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!
作为一个前端小白,我竟然搞定了一个小程序的交付
|
3天前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
15 4
|
3天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
11 2
|
18天前
|
移动开发 小程序 前端开发
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
33 1
|
18天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
38 1
|
26天前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
68 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
29天前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
94 0
前端新机遇!为什么我建议学习鸿蒙?
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)