杨阁辉
4 years ago
28 changed files with 1660 additions and 1131 deletions
Unified 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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import uGap from '@/components/u-gap/u-gap.vue' |
import uGap from '@/components/u-gap/u-gap.vue' |
||||
import { back, go2, loginGo2 } from '@/utils/hook.js' |
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 { getTimer } from '@/utils/index.js' |
||||
import noData from './no-data.vue' |
import noData from './no-data.vue' |
||||
export default { |
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> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
.wrapper { |
.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> |
<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> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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> |
</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> |
</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） |
## 1.0.2（2021-11-22） |
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
- 修复 / 符号在 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, |
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