壁纸小程序Vue3(首页布局)

1.创建一个公共目录common来存放css和images

App.vue中引用

<style lang="scss">
    /*每个页面公共css */
  @import 'common/style/common-style.scss';
  
  
</style>
 

 2.渲染轮播图

<template>
	<view class="homeLayout">
      <view class="banner">
        <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
          indicator-active-color="#fff" autoplay
          circular
        >
          <swiper-item v-for="item in 3" >
              <image src="../../common/images/lxja.webp" mode="widthFix"></image>
          </swiper-item>
        </swiper>
      </view>
	</view>
</template>

<script setup>

	
</script>

<style lang="scss" scoped>
	.homeLayout{
    .banner{
      width: 750rpx;
      padding: 30rpx 0;
      swiper{
        width: 750rpx;
        height: 340rpx;
      
        // swiper-item{}
        //简化
        &-item{
          width: 100%;
          height: 100%;
          padding: 0 30rpx;
          image{
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
  }
</style>

3.公告的轮播

  <view class="notice">
          <view class="left">
              <uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
              <text class="text">公告</text>
          </view>
          <view class="center">
              <swiper vertical autoplay interval="1500" duration="300" circular>
                    <swiper-item v-for="item in 4">文字内容文字内容文字内容文字内容文字内容文字内容</swiper-item>
              </swiper>
          </view>
          <view class="right">
                <uni-icons type="right" size="16" color="#333"></uni-icons>
          </view>
          
      </view>
  .notice{
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #f9f9f9;
      margin: 0 auto;
      border-radius: 80rpx;
      display: flex;
      .left{
        width: 140rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .text{
          color: #28b389;
          font-weight: 600;
          font-size: 28rpx;
        }
      }
      .center{
        flex: 1;
        swiper{
          height: 100%;
          &-item{
            height: 100%;
            font-size: 30rpx;
            color: #666;
            //超出的文字用...替换
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .right{
        width: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

4.渲染公告下的内容

创建公共标题组件common-title

 <view class="select">
          <common-title></common-title>
          <view class="content">
              <scroll-view scroll-x>
                <view class="box" v-for="item in 8">
                    <image src="../../common/images/lxja.webp" mode="aspectFill"></image>
                </view>
              </scroll-view>
          </view>
      </view>

将元素的display属性设置为inline-block可以让元素既有行内元素可以一行显示多个的特性,又有块级元素可以设置宽高的特性。 

 

.select{
      padding-top: 50rpx;
      .content{
        width: 720rpx;
        margin-left: 30rpx;
        margin-top: 30rpx;
        scroll-view{
          white-space: nowrap;
          .box{
            width: 200rpx;
            height: 430rpx;
            display: inline-block;
            margin-right: 15rpx;
            image{
              width: 100%;
              height: 100%;
              border-radius: 10rpx;
            }
          }
          .box:last-child{
            margin-right: 30rpx;
          }
        }
      }
    }
    

5.引入插槽定义公共标题模块

common-title

<template>
  <view class="common-title">
      <view class="name">
        <!-- 插槽 -->
        <slot name="name"></slot>
      </view>
      <view class="custom">
        <slot name="custom"></slot>
      </view>
  </view>
</template>

<script setup>
 
</script>

<style lang="scss" scoped>
.common-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  .name{
    font-size: 40rpx;
  }
}
</style>

index.vue

  <view class="select">
          <common-title>
              <template #name>每日推荐</template>
              <template #custom>
                <view class="date">
                    <uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
                    <view>
                        <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
                    </view>
                </view>
              </template>
          </common-title>
          <view class="content">
              <scroll-view scroll-x>
                <view class="box" v-for="item in 8">
                    <image src="../../common/images/lxja.webp" mode="aspectFill"></image>
                </view>
              </scroll-view>
          </view>
      </view>
      
      <view class="theme">
          <common-title>
            <template #name>专题精选</template>
            <template #custom>
              <navigator url="" class="more">More+</navigator>
            </template>
          </common-title>
      </view>

6.渲染专题精选

 index.vue

 <view class="theme">
          <common-title>
            <template #name>专题精选</template>
            <template #custom>
              <navigator url="" class="more">More+</navigator>
            </template>
          </common-title>
          <view class="content">
              <theme-item v-for="item in 8"></theme-item>
          </view>
      </view>

 

.theme{
        padding-top: 50rpx;
        .more{
          font-size: 32rpx;
          color: #888;
        }
        .content{
          margin-top: 30rpx;
          padding: 0 30rpx;
          //网格布局
          display: grid;
          //每个元素中间有一个间隙
          gap: 15rpx;
          //一行展示三个每行平均分配
          grid-template-columns: repeat(3,1fr);
        }
    }

新创建一个组件them-item

<template>
  <view class="themeTtem">
      <navigator url="" class="box">
        <image class="pic" src="https://img1.baidu.com/it/u=871832137,2572636834&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1198" mode="aspectFill"></image>
        <view class="mask">盛世美颜</view>
        <view class="tab">3天前更新</view>
      </navigator>
  </view>
</template>

.themeTtem{
  .box{
    height: 340rpx;
    border-radius: 10rpx;
    //不加overflow:圆角显示不出来
    overflow: hidden;
    position: relative;
    .pic{
      width: 100%;
      height: 100%;
    }
    .mask{
      width: 100%;
      height: 70rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      //磨砂透明
      background: rgba(0,0,0,0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      //模糊滤镜
      backdrop-filter: blur(20rpx);
      font-weight: 600;
      font-size: 30rpx;
    }
    .tab{
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(250,129,90,0.7);
      backdrop-filter: blur(20rpx);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      //左上 右上 右下  左下
      border-radius: 0 0 20rpx 0;
      //网格文字最小为12px,要想小于12px,可进行如下操作
      //缩放
      transform: scale(0.8);
      //以左上角基准偏移
      transform-origin: left top;
    }
  }
}
 

1)渲染更多标题

index.vue

 <view class="theme">
          <common-title>
            <template #name>专题精选</template>
            <template #custom>
              <navigator url="" class="more">More+</navigator>
            </template>
          </common-title>
          <view class="content">
              <theme-item v-for="item in 8"></theme-item>
              <theme-item :isMore="true"></theme-item>
          </view>

      </view>

 them-item

 <view class="themeTtem">
      <navigator url="" class="box" v-if="!isMore">
        <image class="pic" src="https://img1.baidu.com/it/u=871832137,2572636834&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1198" mode="aspectFill"></image>
        <view class="mask">盛世美颜</view>
        <view class="tab">3天前更新</view>
      </navigator>
      <navigator url="" class="box more" v-else>
        <image class="pic" src="https://img1.baidu.com/it/u=351608013,944758287&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" mode="aspectFill"></image>
        <view class="mask">
          <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
          <view class="text">更多</view>
        </view>
      </navigator>

  </view>

.box.more{
    .mask{
      width: 100%;
      height: 100%;
      flex-direction: column;
    }
    .text{
      font-size: 28rpx;
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506073.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

苍穹外卖04 (新增内表的外键id获取,多表分页查询,多表批量删除,修改先查在改内表外键id用主表的,起售时包含了“停售”状态的外关联表)

1. 新增套餐 1 需求分析和设计 业务规则&#xff1a; 套餐名称唯一 套餐必须属于某个分类 套餐必须包含菜品 名称、分类、价格、图片为必填项 添加菜品窗口需要根据分类类型来展示菜品 新增的套餐默认为停售状态 2 代码实现 1 根据分类id查询菜品 DishControllerGetMa…

手机有线投屏到直播姬pc端教程

1 打开哔哩哔哩直播姬客户端并登录(按下图进行操作) 2 手机用usb数据线连接电脑(若跳出安装驱动的弹窗点击确定或允许),usb的连接方式为仅充电(手机差异要求为仅充电),不同品牌手机要求可能不一样,根据实际的来 3 在投屏过程中不要更改usb的连接方式(不然电脑会死机需要重启) …

SAP 学习笔记 - 系统移行业务 - Migration cockpit工具 - 移行Material(品目)

本章开始&#xff0c;来研究研究移行工具 Migration cockpit。 理论啥的先放一边&#xff0c;来先做一个简单的实例&#xff0c;以对 Migration cockpit 有个大概的印象。 这里就先做一个移行品目的例子。 1&#xff0c;LTMC 启动Migration cockpit工具 默认给我启动了 IE &a…

C++11入门手册第二节,学完直接上手Qt(共两节)

C++多线程 #include <thread>:C++多线程库 #include <mutex>:C++互斥量库 #include <future>:C++异步库 多线程介绍 线程的创建 void entry_1() { }以普通函数作为线程入口函数:void entry_2(int val) { }​std::thread my_thread_1(entry_1);std::thr…

【b站李炎恢】Vue.js Element UI 下 | 十天技能课堂 | 更新中... | 李炎恢

课程地址&#xff1a;【Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢】 https://www.bilibili.com/video/BV1U54y127GB/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 备注&#xff1a;虽然标题声明还在更新中&#xff0c;但是看一些常用…

npm软件包管理器

npm软件包管理器 一.npm 使用步骤二.npm安装所有依赖三.npm全局软件包-nodemon pm 简介链接&#xff1a; 软件包管理器&#xff0c;用于下载和管理 Node.js 环境中的软件包 一.npm 使用步骤 1.初始化清单文件&#xff1a; npm init -y &#xff08;得到 package.json 文件&am…

Django DRF视图

文章目录 一、DRF类视图介绍APIViewGenericAPIView类ViewSet类ModelViewSet类重写方法 二、Request与ResponseRequestResponse 参考 一、DRF类视图介绍 在DRF框架中提供了众多的通用视图基类与扩展类&#xff0c;以简化视图的编写。 • View&#xff1a;Django默认的视图基类&…

RocketMQ(版本4.9.4)+RocketMQ_Dashbord环境搭建(生产者、消费者的前置环境搭建)

一、官方网站下载 RocketMQ源码包 https://rocketmq.apache.org/zh/docs/4.x/introduction/02quickstart 二、把rocketMQ上传到Linux环境下解压&#xff0c;编译&#xff0c;执行以下命令&#xff08;需要提前装jdk和maven并配置好环境变量&#xff09; unzip rocketmq-all-4…

计算机网络-从输入网址到访问网站的全过程

当我们在浏览器中输入一个网址并按下回车键时&#xff0c;会发生一系列复杂的过程&#xff0c;最终使我们能够看到网页的内容。以下是这个过程的详细步骤&#xff1a; 客户端&#xff1a;首先&#xff0c;用户在浏览器中键入网址&#xff0c;然后浏览器会根据这个网址生成一个H…

基于PHP的新闻管理系统(用户发布版)

有需要请加文章底部Q哦 可远程调试 基于PHP的新闻管理系统(用户发布版) 一 介绍 此新闻管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。本新闻管理系统采用用户发布新闻&#xff0c;管理员审核后展示模式。 技术栈&am…

区间预测 | Matlab实现带有置信区间的GRNN广义回归神经网络时间序列未来趋势预测

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 Matlab实现带有置信区间的GRNN广义回归神经网络时间序列未来趋势预测 带有置信区间的GRNN(广义回归神经网络)时间序列未来趋势预测结合了广义回归神经网络(GRNN)的预测能力和置信区间的统计度量,以提供对未来…

C刊级 | Matlab实现DBO-BiTCN-BiGRU-Attention蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

C刊级 | Matlab实现DBO-BiTCN-BiGRU-Attention蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 C刊级 | Matlab实现DBO-BiTCN-BiGRU-Attention蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测效果一览基本介绍模型描述程序…

DevSecOps安全工具链介绍

目录 一、概述 二、安全工具链在平台中的定位 2.1 概述 2.2 分层定位 2.2.1 不同阶段的安全工具 2.2.2 安全工具金字塔 2.3 安全流水线集成概览 2.3.1 概述 2.3.2 标准流水线集成安全工具链概览图 三、安全工具链分类 3.1 概述 3.2 威胁建模类 3.2.1 威胁建模的概念…

SQL | SQL 3小时快速入门学习笔记

【【数据库】SQL 3小时快速入门 #数据库教程 #SQL教程 #MySQL教程 #database#Python连接数据库】 课程链接 一、SQL 1.资料库管理系统&#xff08;Database Management System&#xff0c;简称DBMS&#xff09; 是整理资料的软件。其主要功能包括数据的存储、检索、更新和删除…

Matlab中的脚本和函数

Matlab中的脚本和函数 文章目录 Matlab中的脚本和函数脚本创建脚本代码注释函数创建函数局部函数嵌套函数私有函数匿名函数补充知识函数句柄测试环境:Win11 + Matlab R2021a 脚本 ​ Matlab脚本是最简单的程序文件类型。它们可用于自动执行一系列 Matlab 命令,如命令行重复执…

【opencv】教程代码 —features2D(5)旋转相机的基本全景拼接

基本全景拼接 panorama_stitching_rotating_camera.cpp 将第二张图像进行透视变换后与第一张图像拼接 #include <iostream> // 包含了一些用于输入输出的函数 #include <opencv2/core.hpp> // 包含了OpenCV核心库的一些常用类和函数 #include <opencv2/imgpro…

深度学习理论基础(二)神经网络基础篇

目录 一、基础知识点Ⅰ 参数部分Ⅱ 模型部分 二、普通神经网络模型搭建1. 准备数据集2. 划分数据集3. 搭建模型4. 训练网络5. 测试网络6. 保存与导入模型 神经网络通过学习大量样本的输入与输出特征之间的关系&#xff0c;以拟合出输入与输出之间的方程&#xff0c;学习完成后&…

Monkey 和 TextMonkey ---- 论文阅读

文章目录 Monkey贡献方法增强输入分辨率多级描述生成多任务训练 实验局限结论 TextMonkey贡献方法移位窗口注意&#xff08;Shifted Window Attention&#xff09;图像重采样器&#xff08;Image Resampler&#xff09;Token Resampler位置相关任务&#xff08;Position-Relate…

Collection与数据结构链表与LinkedList(三):链表精选OJ例题(下)

1. 分割链表 OJ链接 class Solution {public ListNode partition(ListNode head, int x) {if(head null){return null;//空链表的情况}ListNode cur head;ListNode formerhead null;ListNode formerend null;ListNode latterhead null;ListNode latterend null;//定义…

【AXIS】AXI-Stream FIFO设计实现(四)——异步时钟

前文介绍了几种同步时钟情况下的AXI Stream FIFO实现方式&#xff0c;一般来说&#xff0c;FIFO也需要承担异步时钟域模块间数据传输的功能&#xff0c;本文介绍异步AXIS FIFO的实现方式。 如前文所说&#xff0c;AXI-Stream FIFO十分类似于FWFT异步FIFO&#xff0c;推荐参考前…