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

相关文章
|
14天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
6 1
.自定义认证前端页面
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
41 0
|
9天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
14天前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
34 4
|
14天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
27 2
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
29天前
|
移动开发 小程序 前端开发
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
37 1
|
29天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
46 1
|
1月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
82 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2