From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:44:20 +0800 Subject: [PATCH] 新建盐城德森项目 --- uni_modules/uni-steps/components/uni-steps/uni-steps.vue | 538 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 269 insertions(+), 269 deletions(-) diff --git a/uni_modules/uni-steps/components/uni-steps/uni-steps.vue b/uni_modules/uni-steps/components/uni-steps/uni-steps.vue index a6c8f28..9a01dbb 100644 --- a/uni_modules/uni-steps/components/uni-steps/uni-steps.vue +++ b/uni_modules/uni-steps/components/uni-steps/uni-steps.vue @@ -1,269 +1,269 @@ -<template> - <view class="uni-steps"> - <view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']"> - <view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']"> - <view v-for="(item,index) in options" :key="index" - :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']"> - <text :style="{color:index === active?activeColor:deactiveColor}" - :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text> - <text :style="{color: deactiveColor}" - :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text> - </view> - </view> - <view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']"> - <view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" - v-for="(item,index) in options" :key="index"> - <view - :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']" - :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"> - </view> - <view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" - v-if="index === active"> - <uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons> - </view> - <view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" - :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view> - <view - :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']" - :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"> - </view> - </view> - </view> - </view> - </view> -</template> - -<script> - /** - * Steps 姝ラ鏉� - * @description 璇勫垎缁勪欢 - * @tutorial https://ext.dcloud.net.cn/plugin?id=34 - * @property {Number} active 褰撳墠姝ラ - * @property {String} direction = [row|column] 褰撳墠姝ラ - * @value row 妯悜 - * @value column 绾靛悜 - * @property {String} activeColor 閫変腑鐘舵�佺殑棰滆壊 - * @property {Array} options 鏁版嵁婧愶紝鏍煎紡涓猴細[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}] - */ - - export default { - name: 'UniSteps', - props: { - direction: { - // 鎺掑垪鏂瑰悜 row column - type: String, - default: 'row' - }, - activeColor: { - // 婵�娲荤姸鎬侀鑹� - type: String, - default: '#2979FF' - }, - deactiveColor: { - // 鏈縺娲荤姸鎬侀鑹� - type: String, - default: '#B7BDC6' - }, - active: { - // 褰撳墠姝ラ - type: Number, - default: 0 - }, - activeIcon: { - // 褰撳墠姝ラ - type: String, - default: 'checkbox-filled' - }, - options: { - type: Array, - default () { - return [] - } - } // 鏁版嵁 - }, - data() { - return {} - } - } -</script> - -<style lang="scss"> - $uni-primary: #2979ff !default; - $uni-border-color:#EDEDED; - .uni-steps { - /* #ifndef APP-NVUE */ - display: flex; - width: 100%; - /* #endif */ - /* #ifdef APP-NVUE */ - flex: 1; - /* #endif */ - flex-direction: column; - } - - .uni-steps__row { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - } - - .uni-steps__column { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row-reverse; - } - - .uni-steps__row-text-container { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row; - align-items: flex-end; - margin-bottom: 8px; - } - - .uni-steps__column-text-container { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - flex: 1; - } - - .uni-steps__row-text { - /* #ifndef APP-NVUE */ - display: inline-flex; - /* #endif */ - flex: 1; - flex-direction: column; - } - - .uni-steps__column-text { - padding: 6px 0px; - border-bottom-style: solid; - border-bottom-width: 1px; - border-bottom-color: $uni-border-color; - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - } - - .uni-steps__row-title { - font-size: 14px; - line-height: 16px; - text-align: center; - } - - .uni-steps__column-title { - font-size: 14px; - text-align: left; - line-height: 18px; - } - - .uni-steps__row-desc { - font-size: 12px; - line-height: 14px; - text-align: center; - } - - .uni-steps__column-desc { - font-size: 12px; - text-align: left; - line-height: 18px; - } - - .uni-steps__row-container { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row; - } - - .uni-steps__column-container { - /* #ifndef APP-NVUE */ - display: inline-flex; - /* #endif */ - width: 30px; - flex-direction: column; - } - - .uni-steps__row-line-item { - /* #ifndef APP-NVUE */ - display: inline-flex; - /* #endif */ - flex-direction: row; - flex: 1; - height: 14px; - line-height: 14px; - align-items: center; - justify-content: center; - } - - .uni-steps__column-line-item { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - flex: 1; - align-items: center; - justify-content: center; - } - - .uni-steps__row-line { - flex: 1; - height: 1px; - background-color: #B7BDC6; - } - - .uni-steps__column-line { - width: 1px; - background-color: #B7BDC6; - } - - .uni-steps__row-line--after { - transform: translateX(1px); - } - - .uni-steps__column-line--after { - flex: 1; - transform: translate(0px, 1px); - } - - .uni-steps__row-line--before { - transform: translateX(-1px); - } - - .uni-steps__column-line--before { - height: 6px; - transform: translate(0px, -13px); - } - - .uni-steps__row-circle { - width: 5px; - height: 5px; - border-radius: 50%; - background-color: #B7BDC6; - margin: 0px 3px; - } - - .uni-steps__column-circle { - width: 5px; - height: 5px; - border-radius: 50%; - background-color: #B7BDC6; - margin: 4px 0px 5px 0px; - } - - .uni-steps__row-check { - margin: 0px 6px; - } - - .uni-steps__column-check { - height: 14px; - line-height: 14px; - margin: 2px 0px; - } -</style> +<template> + <view class="uni-steps"> + <view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']"> + <view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']"> + <view v-for="(item,index) in options" :key="index" + :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']"> + <text :style="{color:index === active?activeColor:deactiveColor}" + :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text> + <text :style="{color: deactiveColor}" + :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text> + </view> + </view> + <view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']"> + <view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" + v-for="(item,index) in options" :key="index"> + <view + :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']" + :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"> + </view> + <view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" + v-if="index === active"> + <uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons> + </view> + <view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" + :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view> + <view + :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']" + :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"> + </view> + </view> + </view> + </view> + </view> +</template> + +<script> + /** + * Steps 姝ラ鏉� + * @description 璇勫垎缁勪欢 + * @tutorial https://ext.dcloud.net.cn/plugin?id=34 + * @property {Number} active 褰撳墠姝ラ + * @property {String} direction = [row|column] 褰撳墠姝ラ + * @value row 妯悜 + * @value column 绾靛悜 + * @property {String} activeColor 閫変腑鐘舵�佺殑棰滆壊 + * @property {Array} options 鏁版嵁婧愶紝鏍煎紡涓猴細[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}] + */ + + export default { + name: 'UniSteps', + props: { + direction: { + // 鎺掑垪鏂瑰悜 row column + type: String, + default: 'row' + }, + activeColor: { + // 婵�娲荤姸鎬侀鑹� + type: String, + default: '#2979FF' + }, + deactiveColor: { + // 鏈縺娲荤姸鎬侀鑹� + type: String, + default: '#B7BDC6' + }, + active: { + // 褰撳墠姝ラ + type: Number, + default: 0 + }, + activeIcon: { + // 褰撳墠姝ラ + type: String, + default: 'checkbox-filled' + }, + options: { + type: Array, + default () { + return [] + } + } // 鏁版嵁 + }, + data() { + return {} + } + } +</script> + +<style lang="scss"> + $uni-primary: #2979ff !default; + $uni-border-color:#EDEDED; + .uni-steps { + /* #ifndef APP-NVUE */ + display: flex; + width: 100%; + /* #endif */ + /* #ifdef APP-NVUE */ + flex: 1; + /* #endif */ + flex-direction: column; + } + + .uni-steps__row { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + } + + .uni-steps__column { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row-reverse; + } + + .uni-steps__row-text-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + align-items: flex-end; + margin-bottom: 8px; + } + + .uni-steps__column-text-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + flex: 1; + } + + .uni-steps__row-text { + /* #ifndef APP-NVUE */ + display: inline-flex; + /* #endif */ + flex: 1; + flex-direction: column; + } + + .uni-steps__column-text { + padding: 6px 0px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-bottom-color: $uni-border-color; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + } + + .uni-steps__row-title { + font-size: 14px; + line-height: 16px; + text-align: center; + } + + .uni-steps__column-title { + font-size: 14px; + text-align: left; + line-height: 18px; + } + + .uni-steps__row-desc { + font-size: 12px; + line-height: 14px; + text-align: center; + } + + .uni-steps__column-desc { + font-size: 12px; + text-align: left; + line-height: 18px; + } + + .uni-steps__row-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + } + + .uni-steps__column-container { + /* #ifndef APP-NVUE */ + display: inline-flex; + /* #endif */ + width: 30px; + flex-direction: column; + } + + .uni-steps__row-line-item { + /* #ifndef APP-NVUE */ + display: inline-flex; + /* #endif */ + flex-direction: row; + flex: 1; + height: 14px; + line-height: 14px; + align-items: center; + justify-content: center; + } + + .uni-steps__column-line-item { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + flex: 1; + align-items: center; + justify-content: center; + } + + .uni-steps__row-line { + flex: 1; + height: 1px; + background-color: #B7BDC6; + } + + .uni-steps__column-line { + width: 1px; + background-color: #B7BDC6; + } + + .uni-steps__row-line--after { + transform: translateX(1px); + } + + .uni-steps__column-line--after { + flex: 1; + transform: translate(0px, 1px); + } + + .uni-steps__row-line--before { + transform: translateX(-1px); + } + + .uni-steps__column-line--before { + height: 6px; + transform: translate(0px, -13px); + } + + .uni-steps__row-circle { + width: 5px; + height: 5px; + border-radius: 50%; + background-color: #B7BDC6; + margin: 0px 3px; + } + + .uni-steps__column-circle { + width: 5px; + height: 5px; + border-radius: 50%; + background-color: #B7BDC6; + margin: 4px 0px 5px 0px; + } + + .uni-steps__row-check { + margin: 0px 6px; + } + + .uni-steps__column-check { + height: 14px; + line-height: 14px; + margin: 2px 0px; + } +</style> -- Gitblit v1.9.1