@ -0,0 +1,84 @@ |
|||||
|
<template> |
||||
|
<!-- 返回顶部 --> |
||||
|
<view class="toTop_M"> |
||||
|
<view class="btn" @tap="toTop" :style="{'display':(toTopFlag === false ? 'none' : 'block')}"> |
||||
|
<uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="'icon-shouye'" size="20" :color="iconColor"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons"; |
||||
|
export default { |
||||
|
name: "toTop", |
||||
|
//import引入的组件需要注入到对象中才能使用 |
||||
|
components: {UniIcons}, |
||||
|
//混合封装的属性和方法 |
||||
|
mixins: [], |
||||
|
//组件传入的属性 |
||||
|
props: { |
||||
|
toTopFlag: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
toTop: { |
||||
|
type: Function, |
||||
|
default: () => {} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
//这里存放数据 |
||||
|
return { |
||||
|
iconColor: '#1a94bc', |
||||
|
}; |
||||
|
}, |
||||
|
//计算属性 类似于data概念 |
||||
|
computed: {}, |
||||
|
//监控data中的数据变化 |
||||
|
watch: {}, |
||||
|
//方法集合 |
||||
|
methods: { |
||||
|
}, |
||||
|
created() { |
||||
|
}, //生命周期 - 创建完成（可以访问当前this实例） |
||||
|
mounted() { |
||||
|
}, //生命周期 - 挂载完成（可以访问DOM元素） |
||||
|
beforeCreate() { |
||||
|
}, //生命周期 - 创建之前 |
||||
|
beforeMount() { |
||||
|
}, //生命周期 - 挂载之前 |
||||
|
beforeUpdate() { |
||||
|
}, //生命周期 - 更新之前 |
||||
|
updated() { |
||||
|
}, //生命周期 - 更新之后 |
||||
|
beforeDestroy() { |
||||
|
}, //生命周期 - 销毁之前 |
||||
|
destroyed() { |
||||
|
}, //生命周期 - 销毁完成 |
||||
|
activated() { |
||||
|
} //如果页面有keep-alive缓存功能，这个函数会触发 |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.toTop_M { |
||||
|
|
||||
|
.btn { |
||||
|
position: fixed; |
||||
|
z-index: 9999; |
||||
|
right: 32rpx; |
||||
|
bottom: 200rpx; |
||||
|
background-color: $uni-white; |
||||
|
padding: 10rpx; |
||||
|
display: none; |
||||
|
border-radius: 10rpx; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.btn .cuIcon-top { |
||||
|
font-size: 30px; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<!-- 瀑布流布局列表 --> |
||||
|
<view class="waterfall-list_M" :style="{marginLeft: margin + 'px', marginRight: margin + 'px'}"> |
||||
|
<view |
||||
|
class="waterfall-col" |
||||
|
v-for="(colItem, index) in cols" |
||||
|
> |
||||
|
<view |
||||
|
class="waterfall-col-item" |
||||
|
v-for="item in colItem.dataList" |
||||
|
:key="item.id" |
||||
|
:style="{ |
||||
|
width: item.width + 'px', |
||||
|
height: item.height + 'px', |
||||
|
marginBottom: interval + 'px' |
||||
|
}" |
||||
|
> |
||||
|
<image lazy-load class="waterfall-img" |
||||
|
:src="item.imgUrl" |
||||
|
@click="clickItem(item)" |
||||
|
mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: "waterfall-list", |
||||
|
//import引入的组件需要注入到对象中才能使用 |
||||
|
components: {}, |
||||
|
//混合封装的属性和方法 |
||||
|
mixins: [], |
||||
|
//组件传入的属性 |
||||
|
props: { |
||||
|
col: { |
||||
|
type: Number, |
||||
|
default: 3, |
||||
|
}, |
||||
|
margin: { |
||||
|
type: Number, |
||||
|
default: 20, |
||||
|
}, |
||||
|
interval: { |
||||
|
type: Number, |
||||
|
default: 10 |
||||
|
}, |
||||
|
clickItem: { |
||||
|
type: Function, |
||||
|
default: () => {} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
//这里存放数据 |
||||
|
return { |
||||
|
pageWidth: 750, |
||||
|
colWidth: 210, |
||||
|
cols: [ |
||||
|
{ |
||||
|
height: 0, |
||||
|
dataList: [] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
//计算属性 类似于data概念 |
||||
|
computed: {}, |
||||
|
//监控data中的数据变化 |
||||
|
watch: {}, |
||||
|
//方法集合 |
||||
|
methods: { |
||||
|
init() { |
||||
|
let that = this; |
||||
|
that.col = that.col ? that.col : 3; |
||||
|
//初始化列 |
||||
|
if (that.col > 0) { |
||||
|
let cols = [] |
||||
|
for (let i = 0; i < that.col; i++) { |
||||
|
cols.push({ |
||||
|
height: 0, |
||||
|
dataList: [] |
||||
|
}) |
||||
|
} |
||||
|
that.cols = cols; |
||||
|
} |
||||
|
//计算列宽度 |
||||
|
that.colWidth = (that.pageWidth - that.margin * 2 - that.interval * (that.col - 1)) / that.col; |
||||
|
}, |
||||
|
getAddCurrentIndex(data) { |
||||
|
if (data && data.length > 0) { |
||||
|
let min = data[0].height; |
||||
|
let index = 0; |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
if (data[i].height < min){ |
||||
|
min = data[i].height; |
||||
|
index = i; |
||||
|
} |
||||
|
} |
||||
|
return index; |
||||
|
} |
||||
|
return undefined; |
||||
|
}, |
||||
|
calcHeightWidth(item) { |
||||
|
let that = this; |
||||
|
item.width = that.colWidth; |
||||
|
switch (item.typeId) { |
||||
|
case 1: |
||||
|
item.height = item.width * 1; |
||||
|
break; |
||||
|
case 2: |
||||
|
item.height = item.width * 1; |
||||
|
break; |
||||
|
case 3: |
||||
|
item.height = item.width + (item.width * 0.7); |
||||
|
break; |
||||
|
case 4: |
||||
|
item.height = item.width - (item.width * 0.2); |
||||
|
break; |
||||
|
case 5: |
||||
|
item.height = item.width - (item.width * 0.2); |
||||
|
break; |
||||
|
case 6: |
||||
|
item.height = item.width * 1; |
||||
|
break; |
||||
|
default: |
||||
|
item.height = item.width * 1; |
||||
|
} |
||||
|
return item |
||||
|
}, |
||||
|
addData(data) { |
||||
|
let that = this; |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
that.calcHeightWidth(data[i]); |
||||
|
let index = that.getAddCurrentIndex(that.cols); |
||||
|
that.cols[index].height += data[i].height; |
||||
|
that.cols[index].dataList.push(data[i]); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
let that = this; |
||||
|
uni.getSystemInfo({ |
||||
|
success: function (res) { |
||||
|
that.pageWidth = res.screenWidth; |
||||
|
that.init(); |
||||
|
} |
||||
|
}) |
||||
|
}, //生命周期 - 创建完成（可以访问当前this实例） |
||||
|
mounted() { |
||||
|
|
||||
|
}, //生命周期 - 挂载完成（可以访问DOM元素） |
||||
|
beforeCreate() { |
||||
|
}, //生命周期 - 创建之前 |
||||
|
beforeMount() { |
||||
|
}, //生命周期 - 挂载之前 |
||||
|
beforeUpdate() { |
||||
|
}, //生命周期 - 更新之前 |
||||
|
updated() { |
||||
|
}, //生命周期 - 更新之后 |
||||
|
beforeDestroy() { |
||||
|
}, //生命周期 - 销毁之前 |
||||
|
destroyed() { |
||||
|
}, //生命周期 - 销毁完成 |
||||
|
activated() { |
||||
|
} //如果页面有keep-alive缓存功能，这个函数会触发 |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.waterfall-list_M { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.waterfall-col { |
||||
|
|
||||
|
.waterfall-col-item { |
||||
|
background: $uni-bg-base-color; |
||||
|
border-radius: 10px; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25); |
||||
|
|
||||
|
.waterfall-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 401 B |
|
Before Width: | Height: | Size: 470 B |
|
Before Width: | Height: | Size: 511 B |
|
Before Width: | Height: | Size: 476 B |
|
Before Width: | Height: | Size: 472 B |
|
Before Width: | Height: | Size: 545 B |
|
Before Width: | Height: | Size: 365 B |
|
Before Width: | Height: | Size: 587 B |
|
Before Width: | Height: | Size: 565 B |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 8.2 KiB |
@ -1,33 +0,0 @@ |
|||||
/* ===== 页面公用 ===== */ |
|
||||
page { |
|
||||
// width: 100vw; |
|
||||
height: 100vh; |
|
||||
background-color: #f5f5f5; |
|
||||
} |
|
||||
|
|
||||
view { |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
/* ==== 弹性盒模型布局 ==== */ |
|
||||
.fb-d-r { display: flex; flex-direction: row; } |
|
||||
.fb-d-c { display: flex; flex-direction: column;} |
|
||||
.fb-w { flex-wrap: wrap; } |
|
||||
.fb-j-a { justify-content: flex-start; } |
|
||||
.fb-j-e { justify-content: flex-end; } |
|
||||
.fb-j-c { justify-content: center; } |
|
||||
.fb-j-sb { justify-content: space-between; } |
|
||||
.fb-j-sa { justify-content: space-around; } |
|
||||
.fb-a-a { align-items: flex-start; } |
|
||||
.fb-a-e { align-items: flex-end; } |
|
||||
.fb-a-c { align-items: center; } |
|
||||
.fb-a-sb { align-items: space-between; } |
|
||||
.fb-a-sa { align-items: space-around; } |
|
||||
|
|
||||
/* ==== 外边距 ==== */ |
|
||||
.ml-10 { |
|
||||
margin-left: 10rpx; |
|
||||
} |
|
||||
.mt-10 { |
|
||||
margin-top: 10rpx; |
|
||||
} |
|
||||
@ -1,20 +0,0 @@ |
|||||
@font-face { |
|
||||
font-family: "customicons"; /* Project id 2878519 */ |
|
||||
src:url('/static/customicons.ttf') format('truetype'); |
|
||||
} |
|
||||
|
|
||||
.customicons { |
|
||||
font-family: "customicons" !important; |
|
||||
} |
|
||||
|
|
||||
.youxi:before { |
|
||||
content: "\e60e"; |
|
||||
} |
|
||||
|
|
||||
.wenjian:before { |
|
||||
content: "\e60f"; |
|
||||
} |
|
||||
|
|
||||
.zhuanfa:before { |
|
||||
content: "\e610"; |
|
||||
} |
|
||||
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 10 KiB |
@ -0,0 +1,101 @@ |
|||||
|
@font-face { |
||||
|
font-family: "iconfont"; /* Project id 3946003 */ |
||||
|
src: url('/static/icon/iconfont.ttf?t=1678976128744') format('truetype'); |
||||
|
} |
||||
|
|
||||
|
.iconfont { |
||||
|
font-family: "iconfont" !important; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
.icon-tuichu:before { |
||||
|
content: "\e62c"; |
||||
|
} |
||||
|
|
||||
|
.icon-qingchu:before { |
||||
|
content: "\e8b4"; |
||||
|
} |
||||
|
|
||||
|
.icon-wenti-:before { |
||||
|
content: "\e631"; |
||||
|
} |
||||
|
|
||||
|
.icon-chilun:before { |
||||
|
content: "\e61f"; |
||||
|
} |
||||
|
|
||||
|
.icon-zhifeiji:before { |
||||
|
content: "\e661"; |
||||
|
} |
||||
|
|
||||
|
.icon-wodeshoucang:before { |
||||
|
content: "\e6c4"; |
||||
|
} |
||||
|
|
||||
|
.icon-gengduo:before { |
||||
|
content: "\e617"; |
||||
|
} |
||||
|
|
||||
|
.icon-hot:before { |
||||
|
content: "\e758"; |
||||
|
} |
||||
|
|
||||
|
.icon-fenxiang:before { |
||||
|
content: "\e724"; |
||||
|
} |
||||
|
|
||||
|
.icon-fenxiang1:before { |
||||
|
content: "\e636"; |
||||
|
} |
||||
|
|
||||
|
.icon-weishoucang:before { |
||||
|
content: "\e63a"; |
||||
|
} |
||||
|
|
||||
|
.icon-weixihuan:before { |
||||
|
content: "\e63b"; |
||||
|
} |
||||
|
|
||||
|
.icon-yishoucang:before { |
||||
|
content: "\e63c"; |
||||
|
} |
||||
|
|
||||
|
.icon-yixihuan:before { |
||||
|
content: "\e641"; |
||||
|
} |
||||
|
|
||||
|
.icon-xiazai:before { |
||||
|
content: "\e647"; |
||||
|
} |
||||
|
|
||||
|
.icon-shoucang:before { |
||||
|
content: "\e8b9"; |
||||
|
} |
||||
|
|
||||
|
.icon-tupian:before { |
||||
|
content: "\e8ba"; |
||||
|
} |
||||
|
|
||||
|
.icon-xihuan:before { |
||||
|
content: "\e63d"; |
||||
|
} |
||||
|
|
||||
|
.icon-wode:before { |
||||
|
content: "\e620"; |
||||
|
} |
||||
|
|
||||
|
.icon-shouye:before { |
||||
|
content: "\e664"; |
||||
|
} |
||||
|
|
||||
|
.icon-fenlei:before { |
||||
|
content: "\e67b"; |
||||
|
} |
||||
|
|
||||
|
.icon-yishu:before { |
||||
|
content: "\e6ad"; |
||||
|
} |
||||
|
|
||||
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 7.5 KiB |
@ -1 +1,61 @@ |
|||||
@import '@/uni_modules/uni-scss/variables.scss'; |
@import '@/uni_modules/uni-scss/variables.scss'; |
||||
|
//主色 |
||||
|
$uni-primary: #1a94bc; |
||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%); |
||||
|
|
||||
|
// 辅助色 |
||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
|
$uni-success: #18bc37; |
||||
|
$uni-success-disable:mix(#fff,$uni-success,50%); |
||||
|
$uni-success-light: mix(#fff,$uni-success,80%); |
||||
|
|
||||
|
$uni-warning: #f3a73f; |
||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%); |
||||
|
|
||||
|
$uni-error: #e43d33; |
||||
|
$uni-error-disable:mix(#fff,$uni-error,50%); |
||||
|
$uni-error-light: mix(#fff,$uni-error,80%); |
||||
|
|
||||
|
$uni-info: #8f939c; |
||||
|
$uni-info-disable:mix(#fff,$uni-info,50%); |
||||
|
$uni-info-light: mix(#fff,$uni-info,80%); |
||||
|
|
||||
|
// 中性色 |
||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
|
$uni-main-color: #3a3a3a; // 主要文字 |
||||
|
$uni-base-color: #6a6a6a; // 常规文字 |
||||
|
$uni-secondary-color: #909399; // 次要文字 |
||||
|
$uni-extra-color: #c7c7c7; // 辅助说明 |
||||
|
|
||||
|
$uni-btn-text-color: #494951; |
||||
|
|
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #F0F0F0; |
||||
|
$uni-border-2: #EDEDED; |
||||
|
$uni-border-3: #DCDCDC; |
||||
|
$uni-border-4: #B9B9B9; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000; |
||||
|
$uni-white: #ffffff; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
|
$uni-title-text: #262626; |
||||
|
|
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f8f8f8; |
||||
|
$uni-bg-base-color: #CBCBCB; |
||||
|
|
||||
|
/* 水平间距 */ |
||||
|
$uni-spacing-sm: 8px; |
||||
|
$uni-spacing-base: 15px; |
||||
|
$uni-spacing-lg: 30px; |
||||
|
|
||||
|
// 阴影 |
||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||
|
|
||||
|
// 蒙版 |
||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
||||