杨阁辉
4 years ago
28 changed files with 1660 additions and 1131 deletions
Split View
Diff Options
-
7apis/add-paper.js
-
833pages/mall/index.vue
-
185pages/start-page/index.vue
-
BINstatic/imgs/start-page/bkBottom.png
-
BINstatic/imgs/start-page/bkTop.png
-
BINstatic/imgs/start-page/dzqy.png
-
BINstatic/imgs/start-page/ht.png
-
BINstatic/imgs/start-page/qd1.png
-
BINstatic/imgs/start-page/rz.png
-
BINstatic/imgs/start-page/zx.png
-
10uni_modules/uni-scss/changelog.md
-
2uni_modules/uni-scss/index.scss
-
164uni_modules/uni-scss/package.json
-
14uni_modules/uni-scss/styles/index.scss
-
4uni_modules/uni-scss/styles/setting/_border.scss
-
132uni_modules/uni-scss/styles/setting/_color.scss
-
110uni_modules/uni-scss/styles/setting/_radius.scss
-
110uni_modules/uni-scss/styles/setting/_space.scss
-
334uni_modules/uni-scss/styles/setting/_styles.scss
-
48uni_modules/uni-scss/styles/setting/_text.scss
-
286uni_modules/uni-scss/styles/setting/_variables.scss
-
38uni_modules/uni-scss/styles/tools/functions.scss
-
62uni_modules/uni-scss/theme.scss
-
124uni_modules/uni-scss/variables.scss
-
12uni_modules/uni-swiper-dot/changelog.md
-
218uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
-
87uni_modules/uni-swiper-dot/package.json
-
11uni_modules/uni-swiper-dot/readme.md
@ -1,417 +1,446 @@ |
|||
<template> |
|||
<view class="wrapper"> |
|||
<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true"> |
|||
<view slot="left" class="left-title">纸商城</view> |
|||
<view slot="right" class="right-title" @tap="shareTap">分享</view> |
|||
</uni-nav-bar> |
|||
<view class="top-box"> |
|||
<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view> |
|||
<view class="center"> |
|||
<view class="title">{{ storeInformation.name }}</view> |
|||
<view class="desc">全部商品 39 | 上新 9</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="cut" @click="checkMall()"> |
|||
切换商城 |
|||
<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image> |
|||
</view> |
|||
<view class="set" @click="setting">设置</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="" v-if="pageShow"> |
|||
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff"> |
|||
<view v-for="(item, index) in listData" :key="index"> |
|||
<view class="content" @click="detailInfo(item)"> |
|||
<image class="image" :src="item.litPicUrl" mode=""></image> |
|||
<view class="" style="width: 100%"> |
|||
<view class="title"> |
|||
<view class="">{{ item.brandName }}</view> |
|||
<view class=""> |
|||
<image |
|||
class="icon" |
|||
:src="item.status === 30111 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" |
|||
mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="sub-title">{{ item.categoryName }}/{{ item.name }}/{{ item.manufacturerName }}</view> |
|||
<view class="desc"> |
|||
克重(价格)： |
|||
<text v-for="(sku, index) in item.skuList" :key="index">{{ sku.weight }}({{ sku.listPrice }})</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="time">{{ item.updateTime | timeFilter }}</view> |
|||
<view class="btn"> |
|||
<view class="" @click="editPaper(item)" v-if="item.status === 30112">编辑</view> |
|||
<view class="divide"></view> |
|||
<view class="" @click="productStatusChange(item)">{{ item.status === 30111 ? '下架' : '上架' }}</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
</view> |
|||
</scroll-list> |
|||
</view> |
|||
<view> |
|||
<view class="offer-prices" @click="nativeTo()"><image class="my-image" src="../../static/imgs/trade/camera.png" mode=""></image></view> |
|||
</view> |
|||
<no-data v-if="!pageShow"></no-data> |
|||
</view> |
|||
<view class="wrapper"> |
|||
<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true"> |
|||
<view slot="left" class="left-title">纸商城</view> |
|||
<view slot="right" class="right-title" @tap="shareTap">分享</view> |
|||
</uni-nav-bar> |
|||
<view class="top-box" :style="backgroundStyle"> |
|||
<view class=""><image class="image" :src="logo" mode=""></image></view> |
|||
<view class="center"> |
|||
<view class="title">{{ storeInformation.name }}</view> |
|||
<view class="desc">全部商品 {{ storeInformation.productNumber }} | 上新 {{ storeInformation.currentProductNumber }}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="cut" @click="checkMall()"> |
|||
切换商城 |
|||
<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image> |
|||
</view> |
|||
<view class="set" @click="setting">设置</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="" v-if="pageShow"> |
|||
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff"> |
|||
<view v-for="(item, index) in listData" :key="index"> |
|||
<view class="content" @click="detailInfo(item)"> |
|||
<image class="image" :src="item.litPicUrl" mode=""></image> |
|||
<view class="" style="width: 100%"> |
|||
<view class="title"> |
|||
<view class="">{{ item.brandName }}</view> |
|||
<view class=""> |
|||
<image |
|||
class="icon" |
|||
:src="item.status === 30111 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" |
|||
mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="sub-title">{{ item.categoryName }}/{{ item.name }}/{{ item.manufacturerName }}</view> |
|||
<view class="desc"> |
|||
克重(价格)： |
|||
<text v-for="(sku, index) in item.skuList" :key="index">{{ sku.weight }}({{ sku.listPrice }})</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other"> |
|||
<view class="time">{{ item.updateTime | timeFilter }}</view> |
|||
<view class="btn"> |
|||
<view class="" @click="editPaper(item)" v-if="item.status === 30112">编辑</view> |
|||
<view class="divide"></view> |
|||
<view class="" @click="productStatusChange(item)">{{ item.status === 30111 ? '下架' : '上架' }}</view> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
</view> |
|||
</scroll-list> |
|||
</view> |
|||
<view> |
|||
<view class="offer-prices" @click="nativeTo()"><image class="my-image" src="../../static/imgs/trade/camera.png" mode=""></image></view> |
|||
</view> |
|||
<no-data v-if="!pageShow"></no-data> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
import { back, go2, loginGo2 } from '@/utils/hook.js' |
|||
import { SupplierList, productStatus } from '@/apis/add-paper.js' |
|||
import { SupplierList, productStatus, storeDetail } from '@/apis/add-paper.js' |
|||
import { getTimer } from '@/utils/index.js' |
|||
import noData from './no-data.vue' |
|||
export default { |
|||
components: { uGap, noData }, |
|||
filters: { |
|||
timeFilter(value) { |
|||
var abs = '' |
|||
if (value) { |
|||
abs = getTimer(value) |
|||
} |
|||
return abs |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
pageShow: true, |
|||
storeInformation: { |
|||
supplierId: null, |
|||
name: null |
|||
}, |
|||
option: { |
|||
size: 10, |
|||
auto: true, |
|||
emptyText: '暂无数据~', |
|||
background: '#F7F8FA', |
|||
disabled: false |
|||
}, |
|||
pattern: { |
|||
backgroundColor: '#007AFF', |
|||
buttonColor: '#007AFF' |
|||
}, |
|||
content: [], |
|||
horizontal: 'right', |
|||
vertical: 'bottom', |
|||
direction: 'vertical', |
|||
orderPagination: { |
|||
pageNum: 0, // 初始会执行一次下拉加载 |
|||
pageSize: 10, |
|||
storeId: null, |
|||
name: null, |
|||
supplierId: this.$store.state.supplierInfo.supplierId |
|||
}, |
|||
listData: [] |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.storeInformation = { |
|||
supplierId: this.$store.state.supplierInfo.supplierId, |
|||
name: this.$store.state.supplierInfo.name |
|||
} |
|||
this.quertData() |
|||
}, |
|||
onLoad() { |
|||
this.quertData() |
|||
}, |
|||
methods: { |
|||
back, |
|||
|
|||
// 获取纸品列表 pageShow |
|||
quertData() { |
|||
return new Promise((resolve, reject) => { |
|||
SupplierList({ ...this.orderPagination }) |
|||
.then((res) => { |
|||
if (res) { |
|||
if (res.records.length === 0) { |
|||
this.pageShow = false |
|||
return |
|||
} |
|||
if (this.orderPagination.pageNum == 1) { |
|||
this.listData = res.records |
|||
} else { |
|||
this.listData = this.listData.concat(res.records) |
|||
} |
|||
resolve({ list: this.listData, total: res.total }) |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
reject(err) |
|||
}) |
|||
}) |
|||
}, |
|||
downCallback() { |
|||
this.orderPagination.pageNum = 1 |
|||
this.quertData() |
|||
.then(({ list, total }) => { |
|||
this.$refs.list.refreshSuccess({ list, total }) |
|||
}) |
|||
.catch(() => { |
|||
this.$refs.list.refreshFail() |
|||
}) |
|||
}, |
|||
upCallback() { |
|||
this.orderPagination.pageNum++ |
|||
this.quertData() |
|||
.then(({ list, total }) => { |
|||
this.$refs.list.loadSuccess({ list, total }) |
|||
}) |
|||
.catch(() => { |
|||
this.$refs.list.loadFail() |
|||
}) |
|||
}, |
|||
// 切换商城按钮 |
|||
checkMall() { |
|||
go2('switching-mall', { supplierId: this.storeInformation.supplierId }) |
|||
}, |
|||
// 按钮点击事件 |
|||
nativeTo() { |
|||
var params = { |
|||
title: '添加纸品' |
|||
} |
|||
go2('add-paper', params) |
|||
}, |
|||
// 编辑事件 |
|||
editPaper(item) { |
|||
var params = { |
|||
...item, |
|||
title: '编辑纸品' |
|||
} |
|||
go2('add-paper', params) |
|||
}, |
|||
// 店铺设置按钮 |
|||
setting(item) { |
|||
go2('store-settings') |
|||
}, |
|||
// 详情点击事件 |
|||
detailInfo(item) { |
|||
loginGo2('paper-detail', item) |
|||
}, |
|||
// 上下架事件 |
|||
productStatusChange(item) { |
|||
var params = { |
|||
id: item.id, |
|||
status: item.status === 30111 ? 30112 : 30111 |
|||
} |
|||
productStatus(params).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '状态修改成功', |
|||
icon: 'success' |
|||
}) |
|||
setTimeout(() => { |
|||
this.orderPagination.pageNum = 1 |
|||
this.quertData() |
|||
}, 500) |
|||
} |
|||
}) |
|||
}, |
|||
// 分享 |
|||
shareTap() { |
|||
uni.share({ |
|||
provider: 'weixin', |
|||
scene: 'WXSceneSession', |
|||
type: 0, |
|||
href: 'http://uniapp.dcloud.io/', |
|||
title: 'uni-app分享', |
|||
summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！', |
|||
imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', |
|||
success: function (res) { |
|||
console.log('success:' + JSON.stringify(res)) |
|||
}, |
|||
fail: function (err) { |
|||
console.log('fail:' + JSON.stringify(err)) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
components: { uGap, noData }, |
|||
filters: { |
|||
timeFilter(value) { |
|||
var abs = '' |
|||
if (value) { |
|||
abs = getTimer(value) |
|||
} |
|||
return abs |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
pageShow: true, |
|||
storeInformation: { |
|||
supplierId: null, |
|||
name: null, |
|||
productNumber: 0, |
|||
currentProductNumber: 0 |
|||
}, |
|||
option: { |
|||
size: 10, |
|||
auto: true, |
|||
emptyText: '暂无数据~', |
|||
background: '#F7F8FA', |
|||
disabled: false |
|||
}, |
|||
pattern: { |
|||
backgroundColor: '#007AFF', |
|||
buttonColor: '#007AFF' |
|||
}, |
|||
content: [], |
|||
horizontal: 'right', |
|||
vertical: 'bottom', |
|||
direction: 'vertical', |
|||
orderPagination: { |
|||
pageNum: 0, // 初始会执行一次下拉加载 |
|||
pageSize: 10, |
|||
storeId: null, |
|||
name: null, |
|||
supplierId: this.$store.state.supplierInfo.supplierId |
|||
}, |
|||
listData: [], |
|||
logo:'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif', |
|||
backgroundStyle:'background: url("/static/imgs/mall/zsc-bg-icon.png") no-repeat;' |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.storeInformation = { |
|||
supplierId: this.$store.state.supplierInfo.supplierId, |
|||
name: this.$store.state.supplierInfo.name |
|||
} |
|||
this.quertData() |
|||
this.getSuliper(this.$store.state.supplierInfo.supplierId) |
|||
}, |
|||
onLoad() { |
|||
this.quertData() |
|||
}, |
|||
methods: { |
|||
back, |
|||
// 获取上新商品数量 |
|||
getSuliper(id) { |
|||
storeDetail(id) |
|||
.then(res => { |
|||
if (res) { |
|||
this.$set(this.storeInformation, 'productNumber', res.productNumber) |
|||
this.$set(this.storeInformation, 'currentProductNumber', res.currentProductNumber) |
|||
if(res.logo === ""){ |
|||
this.logo = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif' |
|||
}else{ |
|||
this.logo = res.logo |
|||
} |
|||
if(res.backgroundImg === ""){ |
|||
this.backgroundStyle = 'background: url("/static/imgs/mall/zsc-bg-icon.png") no-repeat;' |
|||
}else{ |
|||
this.backgroundStyle = 'background: url('+res.backgroundImg+') no-repeat;' |
|||
} |
|||
|
|||
|
|||
} |
|||
}) |
|||
.catch(err => { |
|||
reject(err) |
|||
}) |
|||
}, |
|||
// 获取纸品列表 pageShow |
|||
quertData() { |
|||
return new Promise((resolve, reject) => { |
|||
SupplierList({ ...this.orderPagination }) |
|||
.then(res => { |
|||
if (res) { |
|||
if (res.records.length === 0) { |
|||
this.pageShow = false |
|||
return |
|||
} |
|||
if (this.orderPagination.pageNum == 1) { |
|||
this.listData = res.records |
|||
} else { |
|||
this.listData = this.listData.concat(res.records) |
|||
} |
|||
resolve({ list: this.listData, total: res.total }) |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
reject(err) |
|||
}) |
|||
}) |
|||
}, |
|||
downCallback() { |
|||
this.orderPagination.pageNum = 1 |
|||
this.quertData() |
|||
.then(({ list, total }) => { |
|||
this.$refs.list.refreshSuccess({ list, total }) |
|||
}) |
|||
.catch(() => { |
|||
this.$refs.list.refreshFail() |
|||
}) |
|||
}, |
|||
upCallback() { |
|||
this.orderPagination.pageNum++ |
|||
this.quertData() |
|||
.then(({ list, total }) => { |
|||
this.$refs.list.loadSuccess({ list, total }) |
|||
}) |
|||
.catch(() => { |
|||
this.$refs.list.loadFail() |
|||
}) |
|||
}, |
|||
// 切换商城按钮 |
|||
checkMall() { |
|||
go2('switching-mall', { supplierId: this.storeInformation.supplierId }) |
|||
}, |
|||
// 按钮点击事件 |
|||
nativeTo() { |
|||
var params = { |
|||
title: '添加纸品' |
|||
} |
|||
go2('add-paper', params) |
|||
}, |
|||
// 编辑事件 |
|||
editPaper(item) { |
|||
var params = { |
|||
...item, |
|||
title: '编辑纸品' |
|||
} |
|||
go2('add-paper', params) |
|||
}, |
|||
// 店铺设置按钮 |
|||
setting(item) { |
|||
go2('store-settings') |
|||
}, |
|||
// 详情点击事件 |
|||
detailInfo(item) { |
|||
loginGo2('paper-detail', item) |
|||
}, |
|||
// 上下架事件 |
|||
productStatusChange(item) { |
|||
var params = { |
|||
id: item.id, |
|||
status: item.status === 30111 ? 30112 : 30111 |
|||
} |
|||
productStatus(params).then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '状态修改成功', |
|||
icon: 'success' |
|||
}) |
|||
setTimeout(() => { |
|||
this.orderPagination.pageNum = 1 |
|||
this.quertData() |
|||
}, 500) |
|||
} |
|||
}) |
|||
}, |
|||
// 分享 |
|||
shareTap() { |
|||
uni.share({ |
|||
provider: 'weixin', |
|||
scene: 'WXSceneSession', |
|||
type: 0, |
|||
href: 'http://uniapp.dcloud.io/', |
|||
title: 'uni-app分享', |
|||
summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！', |
|||
imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', |
|||
success: function(res) { |
|||
console.log('success:' + JSON.stringify(res)) |
|||
}, |
|||
fail: function(err) { |
|||
console.log('fail:' + JSON.stringify(err)) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.wrapper { |
|||
width: 750rpx; |
|||
overflow: hidden; |
|||
.left-title { |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
} |
|||
.right-title { |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
} |
|||
.top-box { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
height: 180rpx; |
|||
background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat; |
|||
background-size: 100%; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.right { |
|||
width: 140rpx; |
|||
} |
|||
.center { |
|||
position: relative; |
|||
left: -20rpx; |
|||
} |
|||
.title { |
|||
font-size: 34rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 2rpx; |
|||
font-weight: 600; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
.desc { |
|||
opacity: 0.75; |
|||
font-size: 28rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
padding-right: 32rpx; |
|||
} |
|||
.cut { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
.cut-icon { |
|||
width: 29.42rpx; |
|||
height: 26.67rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
.set { |
|||
opacity: 0.75; |
|||
font-size: 28rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
position: relative; |
|||
top: 39rpx; |
|||
left: 60rpx; |
|||
} |
|||
} |
|||
.content { |
|||
background: #ffffff; |
|||
border-bottom: 2rpx solid #dddddd; |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 24rpx 0rpx 24rpx 32rpx; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
flex: 0 0 100rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
.icon { |
|||
position: relative; |
|||
top: -22rpx; |
|||
width: 150rpx; |
|||
height: 50rpx; |
|||
} |
|||
} |
|||
.sub-title { |
|||
position: relative; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
top: -4rpx; |
|||
} |
|||
.desc { |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
padding-top: 10rpx; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
.other { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 80rpx; |
|||
background: #ffffff; |
|||
padding: 0rpx 32rpx; |
|||
.time { |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.btn { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 400; |
|||
} |
|||
.divide { |
|||
width: 2rpx; |
|||
height: 32rpx; |
|||
background: #d8d8d8; |
|||
margin: 0 32rpx; |
|||
} |
|||
.icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
.offer-prices { |
|||
position: absolute; |
|||
z-index: 9999; |
|||
right: 32rpx; |
|||
bottom: 122rpx; |
|||
background-color: #007aff; |
|||
border-radius: 50%; |
|||
padding: 10rpx; |
|||
text-align: center; |
|||
width: 110rpx; |
|||
height: 110rpx; |
|||
border: 2rpx solid #f9f9f9; |
|||
box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.my-image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
} |
|||
width: 750rpx; |
|||
overflow: hidden; |
|||
.left-title { |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
} |
|||
.right-title { |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
} |
|||
.top-box { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
height: 180rpx; |
|||
|
|||
background-size: 100%; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.right { |
|||
width: 140rpx; |
|||
} |
|||
.center { |
|||
position: relative; |
|||
left: -20rpx; |
|||
} |
|||
.title { |
|||
font-size: 34rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 2rpx; |
|||
font-weight: 600; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
.desc { |
|||
opacity: 0.75; |
|||
font-size: 28rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
padding-right: 32rpx; |
|||
} |
|||
.cut { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 0; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
.cut-icon { |
|||
width: 29.42rpx; |
|||
height: 26.67rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
.set { |
|||
opacity: 0.75; |
|||
font-size: 28rpx; |
|||
color: #ffffff; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
position: relative; |
|||
top: 39rpx; |
|||
left: 60rpx; |
|||
} |
|||
} |
|||
.content { |
|||
background: #ffffff; |
|||
border-bottom: 2rpx solid #dddddd; |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 24rpx 0rpx 24rpx 32rpx; |
|||
.image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
flex: 0 0 100rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 500; |
|||
.icon { |
|||
position: relative; |
|||
top: -22rpx; |
|||
width: 150rpx; |
|||
height: 50rpx; |
|||
} |
|||
} |
|||
.sub-title { |
|||
position: relative; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
top: -4rpx; |
|||
} |
|||
.desc { |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
padding-top: 10rpx; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
.other { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 80rpx; |
|||
background: #ffffff; |
|||
padding: 0rpx 32rpx; |
|||
.time { |
|||
font-size: 28rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.btn { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 400; |
|||
} |
|||
.divide { |
|||
width: 2rpx; |
|||
height: 32rpx; |
|||
background: #d8d8d8; |
|||
margin: 0 32rpx; |
|||
} |
|||
.icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
.offer-prices { |
|||
position: absolute; |
|||
z-index: 9999; |
|||
right: 32rpx; |
|||
bottom: 122rpx; |
|||
background-color: #007aff; |
|||
border-radius: 50%; |
|||
padding: 10rpx; |
|||
text-align: center; |
|||
width: 110rpx; |
|||
height: 110rpx; |
|||
border: 2rpx solid #f9f9f9; |
|||
box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.my-image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
} |
|||
} |
|||
</style> |
|||
</style> |
|||
@ -1,22 +1,185 @@ |
|||
<template> |
|||
<view> |
|||
|
|||
<view class=""> |
|||
<view class="start-page"> |
|||
<view class="view-lineHight"><image class="topImage" src="../../static/imgs/start-page/bkTop.png" mode=""></image></view> |
|||
<view class="page-jump" @click="jumpLogin"><text>跳过</text></view> |
|||
<view class="page1"> |
|||
<swiper |
|||
class="swiper" |
|||
:current="current" |
|||
@change="currentChange" |
|||
:style="pageHight" |
|||
:indicator-dots="indicatorDots" |
|||
:autoplay="autoplay" |
|||
:interval="interval" |
|||
:duration="duration" |
|||
> |
|||
<swiper-item v-for="(swiper, swiperIndex) in pageText" :key="swiperIndex"> |
|||
<view class="swiper-item uni-bg-red"> |
|||
<view class="page-top"> |
|||
<view class="page-text"> |
|||
<text>{{ swiper.text }}</text> |
|||
</view> |
|||
<view class="page-title"> |
|||
<text>{{ swiper.title }}</text> |
|||
</view> |
|||
<view class="page-subtitle"> |
|||
<text>{{ swiper.subTitle }}</text> |
|||
</view> |
|||
<image class="" :src="swiper.image" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="index-point"><view v-for="(items, index) in pageText" :class="current === index ? 'indexs-check' : 'indexs-nocheck'"></view></view> |
|||
<view class="page-btn-class" v-if="current === pageText.length - 1"><button @click="jumpLogin" class="page-btn" type="default">立即开启</button></view> |
|||
</view> |
|||
|
|||
<view class="view-lineHight"><image class="topImage bottom-image" src="../../static/imgs/start-page/bkBottom.png" mode=""></image></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
import { back, go2, uploadFile } from '@/utils/hook.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
mode: 'round', |
|||
pageHight: 0, |
|||
background: ['color1', 'color2', 'color3'], |
|||
indicatorDots: false, |
|||
autoplay: false, |
|||
interval: 2000, |
|||
duration: 500, |
|||
pageText: [ |
|||
{ |
|||
text: '', |
|||
title: '账期订单融资', |
|||
subTitle: '给客户更便宜的价格，更大的销售额', |
|||
image: '../../static/imgs/start-page/rz.png' |
|||
}, |
|||
{ |
|||
text: '', |
|||
title: '征信管理', |
|||
subTitle: '具有客户更丰富多维的征信数据', |
|||
image: '../../static/imgs/start-page/zx.png' |
|||
}, |
|||
{ |
|||
text: '', |
|||
title: '电子签约', |
|||
subTitle: '避免交易过程可能的纠纷', |
|||
image: '../../static/imgs/start-page/dzqy.png' |
|||
}, |
|||
{ |
|||
text: '全新纸掌柜', |
|||
title: '智能合同', |
|||
subTitle: '实现合同同步的财务履约能力', |
|||
image: '../../static/imgs/start-page/ht.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
currentChange(item) { |
|||
this.current = item.detail.current |
|||
}, |
|||
methods: { |
|||
|
|||
jumpLogin(){ |
|||
go2('login') |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.pageHight = 'height:' + (window.screen.height - 60) + 'px' |
|||
console.log(this.pageHight) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
<style lang="scss"> |
|||
.start-page { |
|||
.topImage { |
|||
width: 100%; |
|||
height: 72rpx; |
|||
} |
|||
.view-lineHight { |
|||
line-height: 0rpx; |
|||
} |
|||
.bottom-image { |
|||
position: absolute; |
|||
bottom: 0rpx; |
|||
} |
|||
.page1 { |
|||
background-color: #e7eeff; |
|||
text-align: center; |
|||
} |
|||
.page-title { |
|||
font-size: 100rpx; |
|||
color: #2143af; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
margin: 32rpx 0rpx; |
|||
} |
|||
.page-text { |
|||
font-size: 80rpx; |
|||
color: #2143af; |
|||
font-weight: 400; |
|||
} |
|||
.page-top { |
|||
padding-top: 20%; |
|||
} |
|||
.page-subtitle { |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
font-weight: 400; |
|||
margin: 32rpx 0rpx; |
|||
} |
|||
.page-jump { |
|||
position: absolute; |
|||
padding: 12rpx; |
|||
border: 2rpx solid #979797; |
|||
border-radius: 38rpx; |
|||
width: 122rpx; |
|||
text-align: center; |
|||
right: 54rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
font-weight: 400; |
|||
z-index: 9999; |
|||
} |
|||
.indexs-check { |
|||
background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%); |
|||
border-radius: 12rpx; |
|||
width: 54rpx; |
|||
height: 12rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
.indexs-nocheck { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background-color: #58c4fd; |
|||
margin-left: 10rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.index-point { |
|||
position: absolute; |
|||
top: 70%; |
|||
left: 40%; |
|||
display: flex; |
|||
} |
|||
.page-btn { |
|||
background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%); |
|||
border-radius: 8rpx; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
font-weight: 500; |
|||
width: 400rpx; |
|||
} |
|||
.page-btn-class { |
|||
position: absolute; |
|||
top: 73%; |
|||
left: 0; |
|||
right: 0; |
|||
} |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 92 | Size: 1.2 KiB |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 72 | Size: 704 B |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 603 | Size: 28 KiB |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 583 | Size: 38 KiB |
| Before | After |
|---|---|
|
|
| Width: 180 | Height: 68 | Size: 1.0 KiB |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 583 | Size: 42 KiB |
| Before | After |
|---|---|
|
|
| Width: 750 | Height: 804 | Size: 52 KiB |
@ -1,6 +1,8 @@ |
|||
## 1.0.3（2022-01-21） |
|||
- 优化 组件示例 |
|||
## 1.0.2（2021-11-22） |
|||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
|||
## 1.0.1（2021-11-22） |
|||
- 修复 vue3中scss语法兼容问题 |
|||
## 1.0.0（2021-11-18） |
|||
- init |
|||
## 1.0.1（2021-11-22） |
|||
- 修复 vue3中scss语法兼容问题 |
|||
## 1.0.0（2021-11-18） |
|||
- init |
|||
@ -1 +1 @@ |
|||
@import './styles/index.scss'; |
|||
@import './styles/index.scss'; |
|||
@ -1,82 +1,82 @@ |
|||
{ |
|||
"id": "uni-scss", |
|||
"displayName": "uni-scss 辅助样式", |
|||
"version": "1.0.2", |
|||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
|||
"keywords": [ |
|||
"uni-scss", |
|||
"uni-ui", |
|||
"辅助样式" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"uni-app前端模板", |
|||
"前端页面模板" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "n", |
|||
"联盟": "n" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
{ |
|||
"id": "uni-scss", |
|||
"displayName": "uni-scss 辅助样式", |
|||
"version": "1.0.3", |
|||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
|||
"keywords": [ |
|||
"uni-scss", |
|||
"uni-ui", |
|||
"辅助样式" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"JS SDK", |
|||
"通用 SDK" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "n", |
|||
"联盟": "n" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,7 +1,7 @@ |
|||
@import './setting/_variables.scss'; |
|||
@import './setting/_border.scss'; |
|||
@import './setting/_color.scss'; |
|||
@import './setting/_space.scss'; |
|||
@import './setting/_radius.scss'; |
|||
@import './setting/_text.scss'; |
|||
@import './setting/_styles.scss'; |
|||
@import './setting/_variables.scss'; |
|||
@import './setting/_border.scss'; |
|||
@import './setting/_color.scss'; |
|||
@import './setting/_space.scss'; |
|||
@import './setting/_radius.scss'; |
|||
@import './setting/_text.scss'; |
|||
@import './setting/_styles.scss'; |
|||
@ -1,3 +1,3 @@ |
|||
.uni-border { |
|||
border: 1px $uni-border-1 solid; |
|||
.uni-border { |
|||
border: 1px $uni-border-1 solid; |
|||
} |
|||
@ -1,66 +1,66 @@ |
|||
|
|||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
|||
// @mixin get-styles($k,$c) { |
|||
// @if $k == size or $k == weight{ |
|||
// font-#{$k}:#{$c} |
|||
// }@else{ |
|||
// #{$k}:#{$c} |
|||
// } |
|||
// } |
|||
$uni-ui-color:( |
|||
// 主色 |
|||
primary: $uni-primary, |
|||
primary-disable: $uni-primary-disable, |
|||
primary-light: $uni-primary-light, |
|||
// 辅助色 |
|||
success: $uni-success, |
|||
success-disable: $uni-success-disable, |
|||
success-light: $uni-success-light, |
|||
warning: $uni-warning, |
|||
warning-disable: $uni-warning-disable, |
|||
warning-light: $uni-warning-light, |
|||
error: $uni-error, |
|||
error-disable: $uni-error-disable, |
|||
error-light: $uni-error-light, |
|||
info: $uni-info, |
|||
info-disable: $uni-info-disable, |
|||
info-light: $uni-info-light, |
|||
// 中性色 |
|||
main-color: $uni-main-color, |
|||
base-color: $uni-base-color, |
|||
secondary-color: $uni-secondary-color, |
|||
extra-color: $uni-extra-color, |
|||
// 背景色 |
|||
bg-color: $uni-bg-color, |
|||
// 边框颜色 |
|||
border-1: $uni-border-1, |
|||
border-2: $uni-border-2, |
|||
border-3: $uni-border-3, |
|||
border-4: $uni-border-4, |
|||
// 黑色 |
|||
black:$uni-black, |
|||
// 白色 |
|||
white:$uni-white, |
|||
// 透明 |
|||
transparent:$uni-transparent |
|||
) !default; |
|||
@each $key, $child in $uni-ui-color { |
|||
.uni-#{"" + $key} { |
|||
color: $child; |
|||
} |
|||
.uni-#{"" + $key}-bg { |
|||
background-color: $child; |
|||
} |
|||
} |
|||
.uni-shadow-sm { |
|||
box-shadow: $uni-shadow-sm; |
|||
} |
|||
.uni-shadow-base { |
|||
box-shadow: $uni-shadow-base; |
|||
} |
|||
.uni-shadow-lg { |
|||
box-shadow: $uni-shadow-lg; |
|||
} |
|||
.uni-mask { |
|||
background-color:$uni-mask; |
|||
} |
|||
|
|||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
|||
// @mixin get-styles($k,$c) { |
|||
// @if $k == size or $k == weight{ |
|||
// font-#{$k}:#{$c} |
|||
// }@else{ |
|||
// #{$k}:#{$c} |
|||
// } |
|||
// } |
|||
$uni-ui-color:( |
|||
// 主色 |
|||
primary: $uni-primary, |
|||
primary-disable: $uni-primary-disable, |
|||
primary-light: $uni-primary-light, |
|||
// 辅助色 |
|||
success: $uni-success, |
|||
success-disable: $uni-success-disable, |
|||
success-light: $uni-success-light, |
|||
warning: $uni-warning, |
|||
warning-disable: $uni-warning-disable, |
|||
warning-light: $uni-warning-light, |
|||
error: $uni-error, |
|||
error-disable: $uni-error-disable, |
|||
error-light: $uni-error-light, |
|||
info: $uni-info, |
|||
info-disable: $uni-info-disable, |
|||
info-light: $uni-info-light, |
|||
// 中性色 |
|||
main-color: $uni-main-color, |
|||
base-color: $uni-base-color, |
|||
secondary-color: $uni-secondary-color, |
|||
extra-color: $uni-extra-color, |
|||
// 背景色 |
|||
bg-color: $uni-bg-color, |
|||
// 边框颜色 |
|||
border-1: $uni-border-1, |
|||
border-2: $uni-border-2, |
|||
border-3: $uni-border-3, |
|||
border-4: $uni-border-4, |
|||
// 黑色 |
|||
black:$uni-black, |
|||
// 白色 |
|||
white:$uni-white, |
|||
// 透明 |
|||
transparent:$uni-transparent |
|||
) !default; |
|||
@each $key, $child in $uni-ui-color { |
|||
.uni-#{"" + $key} { |
|||
color: $child; |
|||
} |
|||
.uni-#{"" + $key}-bg { |
|||
background-color: $child; |
|||
} |
|||
} |
|||
.uni-shadow-sm { |
|||
box-shadow: $uni-shadow-sm; |
|||
} |
|||
.uni-shadow-base { |
|||
box-shadow: $uni-shadow-base; |
|||
} |
|||
.uni-shadow-lg { |
|||
box-shadow: $uni-shadow-lg; |
|||
} |
|||
.uni-mask { |
|||
background-color:$uni-mask; |
|||
} |
|||
@ -1,55 +1,55 @@ |
|||
@mixin radius($r,$d:null ,$important: false){ |
|||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
|||
// Key exists within the $uni-radius variable |
|||
@if (map-has-key($uni-radius, $r) and $d){ |
|||
@if $d == t { |
|||
border-top-left-radius:$radius-value; |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == r { |
|||
border-top-right-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == b { |
|||
border-bottom-left-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == l { |
|||
border-top-left-radius:$radius-value; |
|||
border-bottom-left-radius:$radius-value; |
|||
}@else if $d == tl { |
|||
border-top-left-radius:$radius-value; |
|||
}@else if $d == tr { |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == br { |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == bl { |
|||
border-bottom-left-radius:$radius-value; |
|||
} |
|||
}@else{ |
|||
border-radius:$radius-value; |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $key} { |
|||
@include radius($key) |
|||
} |
|||
}@else{ |
|||
.uni-radius { |
|||
@include radius($key) |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $direction in t, r, b, l,tl, tr, br, bl { |
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $direction}-#{"" + $key} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
}@else{ |
|||
.uni-radius-#{$direction} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@mixin radius($r,$d:null ,$important: false){ |
|||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
|||
// Key exists within the $uni-radius variable |
|||
@if (map-has-key($uni-radius, $r) and $d){ |
|||
@if $d == t { |
|||
border-top-left-radius:$radius-value; |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == r { |
|||
border-top-right-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == b { |
|||
border-bottom-left-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == l { |
|||
border-top-left-radius:$radius-value; |
|||
border-bottom-left-radius:$radius-value; |
|||
}@else if $d == tl { |
|||
border-top-left-radius:$radius-value; |
|||
}@else if $d == tr { |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == br { |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == bl { |
|||
border-bottom-left-radius:$radius-value; |
|||
} |
|||
}@else{ |
|||
border-radius:$radius-value; |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $key} { |
|||
@include radius($key) |
|||
} |
|||
}@else{ |
|||
.uni-radius { |
|||
@include radius($key) |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $direction in t, r, b, l,tl, tr, br, bl { |
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $direction}-#{"" + $key} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
}@else{ |
|||
.uni-radius-#{$direction} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,56 +1,56 @@ |
|||
|
|||
@mixin fn($space,$direction,$size,$n) { |
|||
@if $n { |
|||
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
|||
} @else { |
|||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
|||
} |
|||
} |
|||
@mixin get-styles($direction,$i,$space,$n){ |
|||
@if $direction == t { |
|||
@include fn($space, top,$i,$n); |
|||
} |
|||
@if $direction == r { |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == b { |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == l { |
|||
@include fn($space, left,$i,$n); |
|||
} |
|||
@if $direction == x { |
|||
@include fn($space, left,$i,$n); |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == y { |
|||
@include fn($space, top,$i,$n); |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == a { |
|||
@if $n { |
|||
#{$space}:#{$i*$uni-space-root}px; |
|||
} @else { |
|||
#{$space}:#{-$i*$uni-space-root}px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $orientation in m,p { |
|||
$space: margin; |
|||
@if $orientation == m { |
|||
$space: margin; |
|||
} @else { |
|||
$space: padding; |
|||
} |
|||
@for $i from 0 through 16 { |
|||
@each $direction in t, r, b, l, x, y, a { |
|||
.uni-#{$orientation}#{$direction}-#{$i} { |
|||
@include get-styles($direction,$i,$space,true); |
|||
} |
|||
.uni-#{$orientation}#{$direction}-n#{$i} { |
|||
@include get-styles($direction,$i,$space,false); |
|||
} |
|||
} |
|||
} |
|||
|
|||
@mixin fn($space,$direction,$size,$n) { |
|||
@if $n { |
|||
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
|||
} @else { |
|||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
|||
} |
|||
} |
|||
@mixin get-styles($direction,$i,$space,$n){ |
|||
@if $direction == t { |
|||
@include fn($space, top,$i,$n); |
|||
} |
|||
@if $direction == r { |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == b { |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == l { |
|||
@include fn($space, left,$i,$n); |
|||
} |
|||
@if $direction == x { |
|||
@include fn($space, left,$i,$n); |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == y { |
|||
@include fn($space, top,$i,$n); |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == a { |
|||
@if $n { |
|||
#{$space}:#{$i*$uni-space-root}px; |
|||
} @else { |
|||
#{$space}:#{-$i*$uni-space-root}px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $orientation in m,p { |
|||
$space: margin; |
|||
@if $orientation == m { |
|||
$space: margin; |
|||
} @else { |
|||
$space: padding; |
|||
} |
|||
@for $i from 0 through 16 { |
|||
@each $direction in t, r, b, l, x, y, a { |
|||
.uni-#{$orientation}#{$direction}-#{$i} { |
|||
@include get-styles($direction,$i,$space,true); |
|||
} |
|||
.uni-#{$orientation}#{$direction}-n#{$i} { |
|||
@include get-styles($direction,$i,$space,false); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,167 +1,167 @@ |
|||
/* #ifndef APP-NVUE */ |
|||
|
|||
$-color-white:#fff; |
|||
$-color-black:#000; |
|||
@mixin base-style($color) { |
|||
color: #fff; |
|||
background-color: $color; |
|||
border-color: mix($-color-black, $color, 8%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-black, $color, 10%); |
|||
border-color: mix($-color-black, $color, 20%); |
|||
color: $-color-white; |
|||
outline: none; |
|||
} |
|||
} |
|||
@mixin is-color($color) { |
|||
@include base-style($color); |
|||
&[loading] { |
|||
@include base-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&[loading], |
|||
&:not([hover-class]):active { |
|||
color: $-color-white; |
|||
border-color: mix(darken($color,10%), $-color-white); |
|||
background-color: mix($color, $-color-white); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@mixin base-plain-style($color) { |
|||
color:$color; |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 70%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-white, $color, 80%); |
|||
color: $color; |
|||
outline: none; |
|||
border-color: mix($-color-white, $color, 50%); |
|||
} |
|||
} |
|||
@mixin is-plain($color){ |
|||
&[plain] { |
|||
@include base-plain-style($color); |
|||
&[loading] { |
|||
@include base-plain-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&:active { |
|||
color: mix($-color-white, $color, 40%); |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 80%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.uni-btn { |
|||
margin: 5px; |
|||
color: #393939; |
|||
border:1px solid #ccc; |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
background-color: #F9F9F9; |
|||
// TODO 暂时处理边框隐藏一边的问题 |
|||
overflow: visible; |
|||
&::after{ |
|||
border: none; |
|||
} |
|||
|
|||
&:not([type]),&[type=default] { |
|||
color: #999; |
|||
&[loading] { |
|||
background: none; |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
&[disabled]{ |
|||
color: mix($-color-white, #999, 60%); |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
color: mix($-color-white, #999, 60%); |
|||
background-color: mix($-color-white,$-color-black , 98%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
|
|||
&[plain] { |
|||
color: #999; |
|||
background: none; |
|||
border-color: $uni-border-1; |
|||
&:not([hover-class]):active { |
|||
background: none; |
|||
color: mix($-color-white, $-color-black, 80%); |
|||
border-color: mix($-color-white, $-color-black, 90%); |
|||
outline: none; |
|||
} |
|||
&[disabled]{ |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
background: none; |
|||
color: mix($-color-white, #999, 60%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:not([hover-class]):active { |
|||
color: mix($-color-white, $-color-black, 50%); |
|||
} |
|||
|
|||
&[size=mini] { |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
|
|||
|
|||
&.uni-btn-small { |
|||
font-size: 14px; |
|||
} |
|||
&.uni-btn-mini { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
&.uni-btn-radius { |
|||
border-radius: 999px; |
|||
} |
|||
&[type=primary] { |
|||
@include is-color($uni-primary); |
|||
@include is-plain($uni-primary) |
|||
} |
|||
&[type=success] { |
|||
@include is-color($uni-success); |
|||
@include is-plain($uni-success) |
|||
} |
|||
&[type=error] { |
|||
@include is-color($uni-error); |
|||
@include is-plain($uni-error) |
|||
} |
|||
&[type=warning] { |
|||
@include is-color($uni-warning); |
|||
@include is-plain($uni-warning) |
|||
} |
|||
&[type=info] { |
|||
@include is-color($uni-info); |
|||
@include is-plain($uni-info) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
/* #ifndef APP-NVUE */ |
|||
|
|||
$-color-white:#fff; |
|||
$-color-black:#000; |
|||
@mixin base-style($color) { |
|||
color: #fff; |
|||
background-color: $color; |
|||
border-color: mix($-color-black, $color, 8%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-black, $color, 10%); |
|||
border-color: mix($-color-black, $color, 20%); |
|||
color: $-color-white; |
|||
outline: none; |
|||
} |
|||
} |
|||
@mixin is-color($color) { |
|||
@include base-style($color); |
|||
&[loading] { |
|||
@include base-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&[loading], |
|||
&:not([hover-class]):active { |
|||
color: $-color-white; |
|||
border-color: mix(darken($color,10%), $-color-white); |
|||
background-color: mix($color, $-color-white); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@mixin base-plain-style($color) { |
|||
color:$color; |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 70%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-white, $color, 80%); |
|||
color: $color; |
|||
outline: none; |
|||
border-color: mix($-color-white, $color, 50%); |
|||
} |
|||
} |
|||
@mixin is-plain($color){ |
|||
&[plain] { |
|||
@include base-plain-style($color); |
|||
&[loading] { |
|||
@include base-plain-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&:active { |
|||
color: mix($-color-white, $color, 40%); |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 80%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.uni-btn { |
|||
margin: 5px; |
|||
color: #393939; |
|||
border:1px solid #ccc; |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
background-color: #F9F9F9; |
|||
// TODO 暂时处理边框隐藏一边的问题 |
|||
overflow: visible; |
|||
&::after{ |
|||
border: none; |
|||
} |
|||
|
|||
&:not([type]),&[type=default] { |
|||
color: #999; |
|||
&[loading] { |
|||
background: none; |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
&[disabled]{ |
|||
color: mix($-color-white, #999, 60%); |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
color: mix($-color-white, #999, 60%); |
|||
background-color: mix($-color-white,$-color-black , 98%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
|
|||
&[plain] { |
|||
color: #999; |
|||
background: none; |
|||
border-color: $uni-border-1; |
|||
&:not([hover-class]):active { |
|||
background: none; |
|||
color: mix($-color-white, $-color-black, 80%); |
|||
border-color: mix($-color-white, $-color-black, 90%); |
|||
outline: none; |
|||
} |
|||
&[disabled]{ |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
background: none; |
|||
color: mix($-color-white, #999, 60%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:not([hover-class]):active { |
|||
color: mix($-color-white, $-color-black, 50%); |
|||
} |
|||
|
|||
&[size=mini] { |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
|
|||
|
|||
&.uni-btn-small { |
|||
font-size: 14px; |
|||
} |
|||
&.uni-btn-mini { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
&.uni-btn-radius { |
|||
border-radius: 999px; |
|||
} |
|||
&[type=primary] { |
|||
@include is-color($uni-primary); |
|||
@include is-plain($uni-primary) |
|||
} |
|||
&[type=success] { |
|||
@include is-color($uni-success); |
|||
@include is-plain($uni-success) |
|||
} |
|||
&[type=error] { |
|||
@include is-color($uni-error); |
|||
@include is-plain($uni-error) |
|||
} |
|||
&[type=warning] { |
|||
@include is-color($uni-warning); |
|||
@include is-plain($uni-warning) |
|||
} |
|||
&[type=info] { |
|||
@include is-color($uni-info); |
|||
@include is-plain($uni-info) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
@ -1,24 +1,24 @@ |
|||
@mixin get-styles($k,$c) { |
|||
@if $k == size or $k == weight{ |
|||
font-#{$k}:#{$c} |
|||
}@else{ |
|||
#{$k}:#{$c} |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-headings { |
|||
/* #ifndef APP-NVUE */ |
|||
.uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
.container .uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
} |
|||
@mixin get-styles($k,$c) { |
|||
@if $k == size or $k == weight{ |
|||
font-#{$k}:#{$c} |
|||
}@else{ |
|||
#{$k}:#{$c} |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-headings { |
|||
/* #ifndef APP-NVUE */ |
|||
.uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
.container .uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
} |
|||
@ -1,146 +1,146 @@ |
|||
// @use "sass:math"; |
|||
@import '../tools/functions.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2 !default; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px !default; |
|||
$uni-radius: () !default; |
|||
// @use "sass:math"; |
|||
@import '../tools/functions.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2 !default; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px !default; |
|||
$uni-radius: () !default; |
|||
// 边框半径断点 |
|||
$uni-radius: map-deep-merge( |
|||
( |
|||
$uni-radius: map-deep-merge( |
|||
( |
|||
0: 0, |
|||
// TODO 当前版本暂时不支持 sm 属性 |
|||
// 'sm': math.div($uni-radius-root, 2), |
|||
null: $uni-radius-root, |
|||
'lg': $uni-radius-root * 2, |
|||
'xl': $uni-radius-root * 6, |
|||
'pill': 9999px, |
|||
'circle': 50% |
|||
), |
|||
$uni-radius |
|||
// TODO 当前版本暂时不支持 sm 属性 |
|||
// 'sm': math.div($uni-radius-root, 2), |
|||
null: $uni-radius-root, |
|||
'lg': $uni-radius-root * 2, |
|||
'xl': $uni-radius-root * 6, |
|||
'pill': 9999px, |
|||
'circle': 50% |
|||
), |
|||
$uni-radius |
|||
); |
|||
// 字体家族 |
|||
$body-font-family: 'Roboto', sans-serif !default; |
|||
// 文本 |
|||
$heading-font-family: $body-font-family !default; |
|||
$uni-headings: () !default; |
|||
$letterSpacing: -0.01562em; |
|||
$uni-headings: map-deep-merge( |
|||
( |
|||
'h1': ( |
|||
size: 32px, |
|||
weight: 300, |
|||
line-height: 50px, |
|||
// letter-spacing:-0.01562em |
|||
), |
|||
'h2': ( |
|||
size: 28px, |
|||
weight: 300, |
|||
line-height: 40px, |
|||
// letter-spacing: -0.00833em |
|||
), |
|||
'h3': ( |
|||
size: 24px, |
|||
weight: 400, |
|||
line-height: 32px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h4': ( |
|||
size: 20px, |
|||
weight: 400, |
|||
line-height: 30px, |
|||
// letter-spacing: 0.00735em |
|||
), |
|||
'h5': ( |
|||
size: 16px, |
|||
weight: 400, |
|||
line-height: 24px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h6': ( |
|||
size: 14px, |
|||
weight: 500, |
|||
line-height: 18px, |
|||
// letter-spacing: 0.0125em |
|||
), |
|||
'subtitle': ( |
|||
size: 12px, |
|||
weight: 400, |
|||
line-height: 20px, |
|||
// letter-spacing: 0.00937em |
|||
), |
|||
'body': ( |
|||
font-size: 14px, |
|||
font-weight: 400, |
|||
line-height: 22px, |
|||
// letter-spacing: 0.03125em |
|||
), |
|||
'caption': ( |
|||
'size': 12px, |
|||
'weight': 400, |
|||
'line-height': 20px, |
|||
// 'letter-spacing': 0.03333em, |
|||
// 'text-transform': false |
|||
) |
|||
), |
|||
$uni-headings |
|||
); |
|||
|
|||
|
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff !default; |
|||
$uni-primary-disable:lighten($uni-primary,20%) !default; |
|||
$uni-primary-light: lighten($uni-primary,25%) !default; |
|||
|
|||
// 辅助色 |
|||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
|||
$uni-success: #18bc37 !default; |
|||
$uni-success-disable:lighten($uni-success,20%) !default; |
|||
$uni-success-light: lighten($uni-success,25%) !default; |
|||
|
|||
$uni-warning: #f3a73f !default; |
|||
$uni-warning-disable:lighten($uni-warning,20%) !default; |
|||
$uni-warning-light: lighten($uni-warning,25%) !default; |
|||
|
|||
$uni-error: #e43d33 !default; |
|||
$uni-error-disable:lighten($uni-error,20%) !default; |
|||
$uni-error-light: lighten($uni-error,25%) !default; |
|||
|
|||
$uni-info: #8f939c !default; |
|||
$uni-info-disable:lighten($uni-info,20%) !default; |
|||
$uni-info-light: lighten($uni-info,25%) !default; |
|||
|
|||
// 中性色 |
|||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
|||
$uni-main-color: #3a3a3a !default; // 主要文字 |
|||
$uni-base-color: #6a6a6a !default; // 常规文字 |
|||
$uni-secondary-color: #909399 !default; // 次要文字 |
|||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
|||
|
|||
// 边框颜色 |
|||
$uni-border-1: #F0F0F0 !default; |
|||
$uni-border-2: #EDEDED !default; |
|||
$uni-border-3: #DCDCDC !default; |
|||
$uni-border-4: #B9B9B9 !default; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000 !default; |
|||
$uni-white: #ffffff !default; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
|||
|
|||
// 背景色 |
|||
$uni-bg-color: #f7f7f7 !default; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-sm: 8px !default; |
|||
$uni-spacing-base: 15px !default; |
|||
$uni-spacing-lg: 30px !default; |
|||
|
|||
// 阴影 |
|||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
|||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
|||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
|||
|
|||
// 蒙版 |
|||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
|||
// 字体家族 |
|||
$body-font-family: 'Roboto', sans-serif !default; |
|||
// 文本 |
|||
$heading-font-family: $body-font-family !default; |
|||
$uni-headings: () !default; |
|||
$letterSpacing: -0.01562em; |
|||
$uni-headings: map-deep-merge( |
|||
( |
|||
'h1': ( |
|||
size: 32px, |
|||
weight: 300, |
|||
line-height: 50px, |
|||
// letter-spacing:-0.01562em |
|||
), |
|||
'h2': ( |
|||
size: 28px, |
|||
weight: 300, |
|||
line-height: 40px, |
|||
// letter-spacing: -0.00833em |
|||
), |
|||
'h3': ( |
|||
size: 24px, |
|||
weight: 400, |
|||
line-height: 32px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h4': ( |
|||
size: 20px, |
|||
weight: 400, |
|||
line-height: 30px, |
|||
// letter-spacing: 0.00735em |
|||
), |
|||
'h5': ( |
|||
size: 16px, |
|||
weight: 400, |
|||
line-height: 24px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h6': ( |
|||
size: 14px, |
|||
weight: 500, |
|||
line-height: 18px, |
|||
// letter-spacing: 0.0125em |
|||
), |
|||
'subtitle': ( |
|||
size: 12px, |
|||
weight: 400, |
|||
line-height: 20px, |
|||
// letter-spacing: 0.00937em |
|||
), |
|||
'body': ( |
|||
font-size: 14px, |
|||
font-weight: 400, |
|||
line-height: 22px, |
|||
// letter-spacing: 0.03125em |
|||
), |
|||
'caption': ( |
|||
'size': 12px, |
|||
'weight': 400, |
|||
'line-height': 20px, |
|||
// 'letter-spacing': 0.03333em, |
|||
// 'text-transform': false |
|||
) |
|||
), |
|||
$uni-headings |
|||
); |
|||
|
|||
|
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff !default; |
|||
$uni-primary-disable:lighten($uni-primary,20%) !default; |
|||
$uni-primary-light: lighten($uni-primary,25%) !default; |
|||
|
|||
// 辅助色 |
|||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
|||
$uni-success: #18bc37 !default; |
|||
$uni-success-disable:lighten($uni-success,20%) !default; |
|||
$uni-success-light: lighten($uni-success,25%) !default; |
|||
|
|||
$uni-warning: #f3a73f !default; |
|||
$uni-warning-disable:lighten($uni-warning,20%) !default; |
|||
$uni-warning-light: lighten($uni-warning,25%) !default; |
|||
|
|||
$uni-error: #e43d33 !default; |
|||
$uni-error-disable:lighten($uni-error,20%) !default; |
|||
$uni-error-light: lighten($uni-error,25%) !default; |
|||
|
|||
$uni-info: #8f939c !default; |
|||
$uni-info-disable:lighten($uni-info,20%) !default; |
|||
$uni-info-light: lighten($uni-info,25%) !default; |
|||
|
|||
// 中性色 |
|||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
|||
$uni-main-color: #3a3a3a !default; // 主要文字 |
|||
$uni-base-color: #6a6a6a !default; // 常规文字 |
|||
$uni-secondary-color: #909399 !default; // 次要文字 |
|||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
|||
|
|||
// 边框颜色 |
|||
$uni-border-1: #F0F0F0 !default; |
|||
$uni-border-2: #EDEDED !default; |
|||
$uni-border-3: #DCDCDC !default; |
|||
$uni-border-4: #B9B9B9 !default; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000 !default; |
|||
$uni-white: #ffffff !default; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
|||
|
|||
// 背景色 |
|||
$uni-bg-color: #f7f7f7 !default; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-sm: 8px !default; |
|||
$uni-spacing-base: 15px !default; |
|||
$uni-spacing-lg: 30px !default; |
|||
|
|||
// 阴影 |
|||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
|||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
|||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
|||
|
|||
// 蒙版 |
|||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
|||
@ -1,19 +1,19 @@ |
|||
// 合并 map |
|||
@function map-deep-merge($parent-map, $child-map){ |
|||
$result: $parent-map; |
|||
@each $key, $child in $child-map { |
|||
$parent-has-key: map-has-key($result, $key); |
|||
$parent-value: map-get($result, $key); |
|||
$parent-type: type-of($parent-value); |
|||
$child-type: type-of($child); |
|||
$parent-is-map: $parent-type == map; |
|||
$child-is-map: $child-type == map; |
|||
|
|||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
|||
$result: map-merge($result, ( $key: $child )); |
|||
}@else { |
|||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
|||
} |
|||
} |
|||
@return $result; |
|||
}; |
|||
// 合并 map |
|||
@function map-deep-merge($parent-map, $child-map){ |
|||
$result: $parent-map; |
|||
@each $key, $child in $child-map { |
|||
$parent-has-key: map-has-key($result, $key); |
|||
$parent-value: map-get($result, $key); |
|||
$parent-type: type-of($parent-value); |
|||
$child-type: type-of($child); |
|||
$parent-is-map: $parent-type == map; |
|||
$child-is-map: $child-type == map; |
|||
|
|||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
|||
$result: map-merge($result, ( $key: $child )); |
|||
}@else { |
|||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
|||
} |
|||
} |
|||
@return $result; |
|||
}; |
|||
@ -1,31 +1,31 @@ |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
// 辅助色 |
|||
$uni-success: #4cd964; |
|||
// 警告色 |
|||
$uni-warning: #f0ad4e; |
|||
// 错误色 |
|||
$uni-error: #dd524d; |
|||
// 描述色 |
|||
$uni-info: #909399; |
|||
// 中性色 |
|||
$uni-main-color: #303133; |
|||
$uni-base-color: #606266; |
|||
$uni-secondary-color: #909399; |
|||
$uni-extra-color: #C0C4CC; |
|||
// 背景色 |
|||
$uni-bg-color: #f5f5f5; |
|||
// 边框颜色 |
|||
$uni-border-1: #DCDFE6; |
|||
$uni-border-2: #E4E7ED; |
|||
$uni-border-3: #EBEEF5; |
|||
$uni-border-4: #F2F6FC; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000; |
|||
$uni-white: #ffffff; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
// 辅助色 |
|||
$uni-success: #4cd964; |
|||
// 警告色 |
|||
$uni-warning: #f0ad4e; |
|||
// 错误色 |
|||
$uni-error: #dd524d; |
|||
// 描述色 |
|||
$uni-info: #909399; |
|||
// 中性色 |
|||
$uni-main-color: #303133; |
|||
$uni-base-color: #606266; |
|||
$uni-secondary-color: #909399; |
|||
$uni-extra-color: #C0C4CC; |
|||
// 背景色 |
|||
$uni-bg-color: #f5f5f5; |
|||
// 边框颜色 |
|||
$uni-border-1: #DCDFE6; |
|||
$uni-border-2: #E4E7ED; |
|||
$uni-border-3: #EBEEF5; |
|||
$uni-border-4: #F2F6FC; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000; |
|||
$uni-white: #ffffff; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
|||
@ -1,62 +1,62 @@ |
|||
@import './styles/setting/_variables.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
$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-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-bg-color: #f7f7f7; |
|||
|
|||
/* 水平间距 */ |
|||
$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); |
|||
@import './styles/setting/_variables.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
$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-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-bg-color: #f7f7f7; |
|||
|
|||
/* 水平间距 */ |
|||
$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); |
|||
@ -0,0 +1,12 @@ |
|||
## 1.2.0（2021-11-19） |
|||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot) |
|||
## 1.1.0（2021-07-30） |
|||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.0.6（2021-05-12） |
|||
- 新增 示例地址 |
|||
- 修复 示例项目缺少组件的Bug |
|||
## 1.0.5（2021-02-05） |
|||
- 调整为uni_modules目录规范 |
|||
- 新增 clickItem 事件，支持指示点控制轮播 |
|||
- 新增 支持 pc 可用 |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<view class="uni-swiper__warp"> |
|||
<slot /> |
|||
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'> |
|||
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ |
|||
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}" |
|||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" /> |
|||
</view> |
|||
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'> |
|||
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ |
|||
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" |
|||
:key="index" class="uni-swiper__dots-item" /> |
|||
</view> |
|||
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'> |
|||
<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{ |
|||
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" |
|||
:key="index" class="uni-swiper__dots-item " /> |
|||
</view> |
|||
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav"> |
|||
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text> |
|||
</view> |
|||
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box"> |
|||
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ |
|||
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" |
|||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
/** |
|||
* SwiperDod 轮播图指示点 |
|||
* @description 自定义轮播图指示点 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=284 |
|||
* @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current` |
|||
* @property {String} mode = [default|round|nav|indexes] 指示点的类型 |
|||
* @value defualt 默认指示点 |
|||
* @value round 圆形指示点 |
|||
* @value nav 条形指示点 |
|||
* @value indexes 索引指示点 |
|||
* @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填） |
|||
* @property {String} info 轮播图的数据，通过数组长度决定指示点个数 |
|||
* @property {Object} dotsStyles 指示点样式 |
|||
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex} |
|||
*/ |
|||
|
|||
export default { |
|||
name: 'UniSwiperDot', |
|||
emits:['clickItem'], |
|||
props: { |
|||
info: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
current: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
dotsStyles: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 类型 ：default(默认) indexes long nav |
|||
mode: { |
|||
type: String, |
|||
default: 'default' |
|||
}, |
|||
// 只在 nav 模式下生效，变量名称 |
|||
field: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dots: { |
|||
width: 6, |
|||
height: 6, |
|||
bottom: 10, |
|||
color: '#fff', |
|||
backgroundColor: 'rgba(0, 0, 0, .3)', |
|||
border: '1px rgba(0, 0, 0, .3) solid', |
|||
selectedBackgroundColor: '#333', |
|||
selectedBorder: '1px rgba(0, 0, 0, .9) solid' |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dotsStyles(newVal) { |
|||
this.dots = Object.assign(this.dots, this.dotsStyles) |
|||
}, |
|||
mode(newVal) { |
|||
if (newVal === 'indexes') { |
|||
this.dots.width = 14 |
|||
this.dots.height = 14 |
|||
} else { |
|||
this.dots.width = 6 |
|||
this.dots.height = 6 |
|||
} |
|||
} |
|||
|
|||
}, |
|||
created() { |
|||
if (this.mode === 'indexes') { |
|||
this.dots.width = 12 |
|||
this.dots.height = 12 |
|||
} |
|||
this.dots = Object.assign(this.dots, this.dotsStyles) |
|||
}, |
|||
methods: { |
|||
clickItem(index) { |
|||
this.$emit('clickItem', index) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-swiper__warp { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex: 1; |
|||
flex-direction: column; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-swiper__dots-box { |
|||
position: absolute; |
|||
bottom: 10px; |
|||
left: 0; |
|||
right: 0; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex: 1; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-swiper__dots-item { |
|||
width: 8px; |
|||
border-radius: 100px; |
|||
margin-left: 6px; |
|||
background-color: rgba(0, 0, 0, 0.4); |
|||
/* #ifndef APP-NVUE */ |
|||
cursor: pointer; |
|||
/* #endif */ |
|||
/* #ifdef H5 */ |
|||
// border-width: 5px 0; |
|||
// border-style: solid; |
|||
// border-color: transparent; |
|||
// background-clip: padding-box; |
|||
/* #endif */ |
|||
// transition: width 0.2s linear; 不要取消注释，不然会不能变色 |
|||
} |
|||
|
|||
.uni-swiper__dots-item:first-child { |
|||
margin: 0; |
|||
} |
|||
|
|||
.uni-swiper__dots-default { |
|||
border-radius: 100px; |
|||
} |
|||
|
|||
.uni-swiper__dots-long { |
|||
border-radius: 50px; |
|||
} |
|||
|
|||
.uni-swiper__dots-bar { |
|||
border-radius: 50px; |
|||
} |
|||
|
|||
.uni-swiper__dots-nav { |
|||
bottom: 0px; |
|||
// height: 26px; |
|||
padding: 8px 0; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex: 1; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.uni-swiper__dots-nav-item { |
|||
/* overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; */ |
|||
font-size: 14px; |
|||
color: #fff; |
|||
margin: 0 15px; |
|||
} |
|||
|
|||
.uni-swiper__dots-indexes { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
// flex: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-swiper__dots-indexes-text { |
|||
color: #fff; |
|||
font-size: 12px; |
|||
line-height: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
{ |
|||
"id": "uni-swiper-dot", |
|||
"displayName": "uni-swiper-dot 轮播图指示点", |
|||
"version": "1.2.0", |
|||
"description": "自定义轮播图指示点组件", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"轮播图指示点", |
|||
"dot", |
|||
"swiper" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": ["uni-scss"], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
|
|||
|
|||
## SwiperDot 轮播图指示点 |
|||
> **组件名：uni-swiper-dot** |
|||
> 代码块： `uSwiperDot` |
|||
|
|||
|
|||
自定义轮播图指示点 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot) |
|||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
|||
Write
Preview
Loading…
Cancel
Save