盘点管理视图构建

merge-requests/1/head
张鑫 5 years ago
parent 00ce7bfa0f
commit 74a135dc64

25
package-lock.json generated

@ -2922,6 +2922,12 @@
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
"dev": true
},
"batch-processor": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=",
"dev": true
},
"bcrypt-pbkdf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@ -5003,6 +5009,15 @@
"integrity": "sha512-7x2S3yUrspNHQOoPk+Eo+iHViSiJiEGPI6BpmLy1eT2KRNGCkBt/NUYqjfXLd1DpDCQp7n3+LfA1RkbG+LqTZQ==",
"dev": true
},
"element-resize-detector": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.1.tgz",
"integrity": "sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==",
"dev": true,
"requires": {
"batch-processor": "1.0.0"
}
},
"elliptic": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
@ -12444,6 +12459,16 @@
}
}
},
"vue-happy-scroll": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/vue-happy-scroll/-/vue-happy-scroll-2.1.1.tgz",
"integrity": "sha512-3Xy6L+rdpNSB214yHxiF3O/l5/CIT8pxSUBn6PBN6CG94EakwcoSyCbkCTNgjEmtJQHp6pVgUwYFYro4fU43NQ==",
"dev": true,
"requires": {
"element-resize-detector": "^1.1.12",
"vue": "^2.0.0"
}
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

@ -30,6 +30,7 @@
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue-happy-scroll": "^2.1.1",
"vue-template-compiler": "^2.6.11"
},
"rules": {

@ -10,11 +10,18 @@ import api from './plugins/axios/index'
import JSMpeg from './utils/jsmpeg.min'
import vxgplayer from '../public/video_play_plugins/vxgplayer-1.8.54.min'
import '../public/video_play_plugins/vxgplayer-1.8.54.min.css'
Vue.config.productionTip = false
Vue.prototype.$utils = utils
Vue.prototype.$api = api
// import axios from 'axios'
// Vue.prototype.$axios = axios
import {HappyScroll} from 'vue-happy-scroll'
//自定义组件名
Vue.component('happy-scroll', HappyScroll)
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'
new Vue({
router,
store,

@ -27,6 +27,7 @@ import {
Divider,
DatePicker,
Upload,
Radio,
} from "ant-design-vue";
Vue.use(Layout);
Vue.use(ConfigProvider);
@ -54,6 +55,7 @@ Vue.use(Drawer)
Vue.use(Divider)
Vue.use(DatePicker)
Vue.use(Upload)
Vue.use(Radio)
Vue.prototype.$message = message;
Vue.prototype.$info = Modal.info;
Vue.prototype.$success = Modal.success;

@ -15,20 +15,89 @@
未盘点
</span>
</div>
<div class="">
<div class="check-content">
<div class="roadway-top">
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
<div class="roadway-box">
<div class="line" v-for="item in 20" :key="item">
<a-tag
:color="[i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf']"
style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
:key="i">{{i}}-{{item}}
</a-tag>
</div>
</div>
</happy-scroll>
<a-radio-group v-model="size" style="margin:10px 0">
<a-radio-button value="small">
</a-radio-button>
<a-radio-button value="default">
</a-radio-button>
</a-radio-group>
</div>
<a-select default-value="jack" style="width: 180px">
<a-select-option value="jack">
1号巷道
</a-select-option>
<a-select-option value="lucy">
2号巷道
</a-select-option>
<a-select-option value="disabled">
3号巷道
</a-select-option>
</a-select>
<div class="roadway-top">
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
<div class="roadway-box">
<div class="line" v-for="item in 20" :key="item">
<a-tag
:color="[i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf']"
style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
:key="i">{{i}}-{{item}}
</a-tag>
</div>
</div>
</happy-scroll>
<a-radio-group v-model="size" style="margin:10px 0">
<a-radio-button value="small">
</a-radio-button>
<a-radio-button value="default">
</a-radio-button>
</a-radio-group>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
size: 'small'
};
},
mounted() {
},
methods: {},
components: {}
};
</script>
<style lang="scss" scoped>
.check-page {
.title-info {
display: flex;
align-items: center;
justify-content: start;
.explain {
font-weight: 600;
}
.info-text {
display: flex;
align-items: center;
@ -36,5 +105,33 @@
margin-right: 15px;
}
}
.ant-tag {
margin-right: 0;
display: block;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.roadway-top {
padding: 20px 0;
width: 1000px;
.scroll-box {
height: 270px;
.roadway-box {
transform: rotateX(180deg);
padding: 10px 10px 0 0;
.line {
display: flex;
transform: rotateX(180deg); //div
}
}
}
}
}
</style>

Loading…
Cancel
Save