鸡汤来咯开发学习笔记-6

1.在index.vue里面增加main的样式.main{ font-size: 50rpx; font-weight: lighter; width: 100%; letter-spacing: 0.05em; //当前字的间距，其中em是字体大小的倍数 line-height: 1.8em;//行间距 margin-top: 10rpx; //元素的顶部外边距外边距区域 margin-bottom: 60rpx;//元素的底部外边距外边距区域 } 2.在index.vue中修改auther的样式.author{ .line{

前端 · 2024-06-25

鸡汤来咯开发学习笔记-5

1.修改index.vue的body样式，写入overflow: hidden;溢出隐藏，使绿色部分也能变成圆角，并删除绿色背景，重新配置swiper-item2、构建主体首页布局<template> <view class="homeLayout"> <view class="head"> <home-head> </home-head> </view> <view class="body"> <view class="swiperOut"> <swiper vertical> <swiper-item v-for="(item,index) in 5"> <view class="

前端 · 2024-06-24

鸡汤来咯开发学习笔记-4

1.在head-vue中的homehead的样式加入以下代码，使得上面的背景颜色变成渐变色 创建一个从左上角开始的径向渐变。 //第二行同此 渐变的中心位于元素左上角的50%高度和200px宽度的位置。 渐变的起始颜色是#D5F8FC，然后渐变到透明。background: radial-gradient(50% 200px at left top,#D5f8fc,transparent), radial-gradient(50% 200px at right top,#D3CBFC,transparent);2.去官网下载导入uni-dateformat 日期格式化的组件到项目中,并重新启动hbuilder，并修改以前代码的年月日的空白如下，format代表具体格式取值当前时间，可以看官方插件文档<view class="time"> <view class="left"> <uni-dateformat :date="

前端 · 2024-06-23

鸡汤来咯开发学习笔记-3

1.先新建一个components的组件的文件夹里面创建一个home-head.vue的组件，再在index.vue中引用这个组件2.home-head.vue的代码如下<template> <view class="homehead"> <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"> </view>//引用从system.js中获取的变量值 <view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">今日份鸡汤来咯</view> <view class="content"> <view class="time"> <view

前端 · 2024-06-22

鸡汤来咯开发学习笔记-2

1.在page.info中加入"navigationStyle": "custom"，可以使页面变成无头部导航栏的通屏2.对index.vue进行了修改<template> <view class="homeLayout"> <view class="head">头部</view> <view class="body"> <view class="swiperOut">//滑动组件 <swiper vertical>//vertical是设置属性为向下滑动 <swiper-item v-for="(item,index) in 5"> //循环index数组在item的项目中，item是固有属性，每一项对应一个index {{index+1}} </swiper-i

前端 · 2024-06-21
2024 - 2025 ikrins‘Blog. All Rights Reserved.
Theme Jasmine by Kent Liao