This commit is contained in:
Luck-Xiaomi 2022-09-02 16:06:21 +08:00
parent d354583edd
commit 90afc7703b
6 changed files with 123 additions and 1307 deletions

1248
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,6 @@
"build": "vue-cli-service build"
},
"dependencies": {
"a-vue-steps": "^1.0.0",
"axios": "^0.19.2",
"better-scroll": "^2.4.1",
"core-js": "^3.6.5",

View File

@ -24,9 +24,6 @@ import { autoLogin } from '@/assets/js/api/autoLogin-xingXuan'
import { decode, encode } from 'js-base64'
import { loginApi, companyLoginApi, projectLoginApi } from '@/assets/js/api/loginSign'
import VueSteps from 'a-vue-steps'
import 'a-vue-steps/dist/vue-steps.min.css'
// 全局组件挂载
Vue.component('Pagination', Pagination)
@ -214,7 +211,6 @@ Vue.use(vuescroll, {
}
}
});
Vue.use(VueSteps)
// 加载缩略图

View File

@ -0,0 +1,103 @@
<!-- 步骤条 -->
<template>
<div class="steps">
<div class="steps-item" v-for="(item, index) in items" :key="index">
<p :class="['steps-item-line', activeIndex === index ? 'active' : '']"></p>
<p :class="['steps-item-num', activeIndex === index ? 'active' : '']"></p>
<div class="steps-item-text'" :class="['steps-item-text', activeIndex === index ? 'activeText' : '']">
<span class="label">{{ item.label }}</span>
<span class="value">{{ item.value }}</span>
</div>
</div>
</div>
</template>
<style lang='scss' scoped>
.steps {
width: 100%;
display: flex;
height: 80px;
&-item {
width: 150px;
height: 34px;
padding-top: 15px;
position: relative;
// 线
&-line {
width: 100%;
height: 4px;
background: #6dc6d8;
}
//
&-num {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
line-height: 34px;
color: #fff;
text-align: center;
position: absolute;
top: 10px;
left: calc(50% - 17px);
}
//
&-text {
text-align: center;
margin-top: 24px;
}
//
.active {
background: #6dc6d8;
}
.activeText {
color: #0EAEE9;
}
}
.steps-item-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
transform: translateX(-7px);
.label {
color: #9da9b9;
font-size: 12px;
margin-bottom: 10px;
}
.value {
font-size: 15px;
}
}
}
</style>
<script>
export default {
props: {
//
items: {
type: Array,
required: true
},
//
activeIndex: {
type: Number,
default: 0,
required: true
}
},
data () {
return {
}
}
}
</script>

View File

@ -1,37 +1,40 @@
<template>
<Card title="进度管理">
<div class="container">
<VueSteps :items="items" :activeIndex="index" />
<Steps :items="items" :activeIndex="index" />
</div>
</Card>
</template>
<script>
import Card from '../components/Card'
import Steps from './Steps'
import Card from '../../components/Card'
export default {
components: { Card },
components: { Card, Steps },
data() {
return {
items: [
{
num: '一',
text: '测试阶段1'
label: '2022-01-01',
value: '测试阶段1'
},
{
num: '二',
text: '测试阶段2'
label: '二',
value: '测试阶段2'
},
{
num: '三',
text: '测试阶段3'
label: '三',
value: '测试阶段3'
},
{
num: '三',
text: '测试阶段3'
label: '四',
value: '测试阶段3'
},
{
num: '三',
text: '测试阶段3'
label: '五',
value: '测试阶段3'
},
],
index: 0

View File

@ -1348,15 +1348,6 @@
"resolved" "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz"
"version" "4.2.2"
"a-vue-steps@^1.0.0":
"integrity" "sha512-NJYNEBAT8TBzTvE2P/FT2fSlyZ4RUYDYB7cx5gkGlwA6w8x7D92HvvOHzsvgIWywbQHuU+PMxIhZsrbfd0vHnQ=="
"resolved" "https://registry.npmjs.org/a-vue-steps/-/a-vue-steps-1.0.0.tgz"
"version" "1.0.0"
dependencies:
"css-loader" "^0.28.10"
"vue" "^2.5.2"
"vue-style-loader" "^3.1.2"
"abbrev@1":
"integrity" "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
"resolved" "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz"
@ -2911,7 +2902,7 @@
"chalk@^1.1.3":
"integrity" "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A=="
"resolved" "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
"resolved" "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz"
"version" "1.1.3"
dependencies:
"ansi-styles" "^2.2.1"
@ -3657,26 +3648,6 @@
"schema-utils" "^2.7.0"
"semver" "^6.3.0"
"css-loader@^0.28.10":
"integrity" "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg=="
"resolved" "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz"
"version" "0.28.11"
dependencies:
"babel-code-frame" "^6.26.0"
"css-selector-tokenizer" "^0.7.0"
"cssnano" "^3.10.0"
"icss-utils" "^2.1.0"
"loader-utils" "^1.0.2"
"lodash.camelcase" "^4.3.0"
"object-assign" "^4.1.1"
"postcss" "^5.0.6"
"postcss-modules-extract-imports" "^1.2.0"
"postcss-modules-local-by-default" "^1.2.0"
"postcss-modules-scope" "^1.1.0"
"postcss-modules-values" "^1.3.0"
"postcss-value-parser" "^3.3.0"
"source-list-map" "^2.0.0"
"css-loader@^0.28.7":
"integrity" "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg=="
"resolved" "https://registry.npmmirror.com/css-loader/-/css-loader-0.28.11.tgz"
@ -10336,12 +10307,12 @@
"supports-color@^2.0.0":
"integrity" "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
"resolved" "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
"resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-2.0.0.tgz"
"version" "2.0.0"
"supports-color@^3.2.3":
"integrity" "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A=="
"resolved" "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz"
"resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-3.2.3.tgz"
"version" "3.2.3"
dependencies:
"has-flag" "^1.0.0"
@ -11109,14 +11080,6 @@
"hash-sum" "^1.0.2"
"loader-utils" "^1.0.2"
"vue-style-loader@^3.1.2":
"integrity" "sha512-ICtVdK/p+qXWpdSs2alWtsXt9YnDoYjQe0w5616j9+/EhjoxZkbun34uWgsMFnC1MhrMMwaWiImz3K2jK1Yp2Q=="
"resolved" "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz"
"version" "3.1.2"
dependencies:
"hash-sum" "^1.0.2"
"loader-utils" "^1.0.2"
"vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
"integrity" "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ=="
"version" "4.1.2"
@ -11136,7 +11099,7 @@
"resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
"version" "1.9.1"
"vue@^2.0.0", "vue@^2.4.4", "vue@^2.5.17", "vue@^2.5.2", "vue@^2.6.10", "vue@^2.6.11", "vue@>=2.2":
"vue@^2.0.0", "vue@^2.4.4", "vue@^2.5.17", "vue@^2.6.10", "vue@^2.6.11", "vue@>=2.2":
"integrity" "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
"version" "2.6.11"