.
This commit is contained in:
parent
d354583edd
commit
90afc7703b
1248
package-lock.json
generated
1248
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
// 加载缩略图
|
||||
|
||||
103
src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
Normal file
103
src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
Normal 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>
|
||||
@ -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
|
||||
45
yarn.lock
45
yarn.lock
@ -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"
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user