|
|
@@ -1,220 +0,0 @@
|
|
|
-<style lang="scss" scoped>
|
|
|
- .app-list-content{
|
|
|
- min-width: 1000px;
|
|
|
- }
|
|
|
- .left-box{
|
|
|
- width: 30%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content-box{
|
|
|
- width: 5%;
|
|
|
- height: 100%;
|
|
|
- .switchover-box{
|
|
|
- div{
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 20px;
|
|
|
- color: #797979;
|
|
|
- border: 1px solid #dadada;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 36px;
|
|
|
- cursor:pointer; //小手
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .right-box{
|
|
|
- width: 65%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .title{
|
|
|
- width: calc(100% - 2px);
|
|
|
- height: 40px;
|
|
|
- /*border: 1px solid #eee;*/
|
|
|
- border: 1px solid #dadada;
|
|
|
- }
|
|
|
- .center-box{
|
|
|
- margin-top: 20px;
|
|
|
- height: calc(100% - 64px);
|
|
|
- .class-list{
|
|
|
- width: 30%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #dadada;
|
|
|
- overflow: scroll;
|
|
|
- div{
|
|
|
- height: 40px;
|
|
|
- cursor:pointer; //小手
|
|
|
- &.active{
|
|
|
- color: #ffffff;
|
|
|
- background: #00ccff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item-box{
|
|
|
- position: relative;
|
|
|
- width: 65%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #dadada;
|
|
|
- padding: 0 10px;
|
|
|
- .item-seek-box{
|
|
|
- height: 80px;
|
|
|
- border-bottom: 1px solid #dadada;
|
|
|
- input{
|
|
|
- width: calc(100% - 60px);
|
|
|
- padding: 0 10px;
|
|
|
- height: 40px;
|
|
|
- border: none;
|
|
|
- background: #f1f2f6;
|
|
|
- }
|
|
|
- .item-seek-btn{
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- color: #ffffff;
|
|
|
- background: #169bd5;
|
|
|
- cursor:pointer; //小手
|
|
|
- }
|
|
|
- }
|
|
|
- .infinite-list-title{
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- .infinite-list{
|
|
|
- height: calc(100% - 40px - 80px);
|
|
|
- .infinite-list-item{
|
|
|
- height: 60px;
|
|
|
- cursor:pointer; //小手
|
|
|
- span{
|
|
|
- margin: 0 10px;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item-menu-box{
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: calc(100% - 20px);
|
|
|
- height: 40px;
|
|
|
- padding: 0 10px;
|
|
|
- background: #f7f7f7;
|
|
|
- border-top: 1px solid #dadada;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
-<template>
|
|
|
- <div class="flex-center-between app-list-content">
|
|
|
- <div class="left-box">
|
|
|
- <div class="flex-center-center title">平台花材</div>
|
|
|
- <div class="flex-center-between center-box">
|
|
|
- <div class="class-list">
|
|
|
- <div class="flex-center-center " v-for="res in 30">分类</div>
|
|
|
- </div>
|
|
|
- <div class="item-box">
|
|
|
- <div class="flex-center item-seek-box">
|
|
|
- <input type="text" placeholder="请输入花材名称,支持拼音首字母搜索">
|
|
|
- <div class="flex-center-center item-seek-btn">搜索</div>
|
|
|
- </div>
|
|
|
- <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
|
|
|
- <li v-for="i in count" class="flex-center infinite-list-item">
|
|
|
- <spam class="el-icon-success" style="color: #b3b3b3"></spam>
|
|
|
- <span>{{ i }}</span>
|
|
|
- <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
|
|
|
- <span>粉色家人</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="flex-center item-menu-box">
|
|
|
- <el-checkbox @change="allSelectItem" v-model="checkedAll">全选</el-checkbox>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex-center-center content-box">
|
|
|
- <div class="switchover-box">
|
|
|
- <div class="flex-center-center">→</div>
|
|
|
- <div class="flex-center-center">←</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right-box">
|
|
|
- <div class="flex-center-center title">我的花材</div>
|
|
|
- <div class="flex-center-between center-box">
|
|
|
- <div class="item-box">
|
|
|
- <div class="flex-center infinite-list-title">
|
|
|
- <div style="width: 70px;text-align: center">选择</div>
|
|
|
- <div style="width: 70px;text-align: center">图片</div>
|
|
|
- <div style="width: 100px;text-align: center">名称</div>
|
|
|
- <div style="width: 100px;text-align: center">售价</div>
|
|
|
- <div style="width: 100px;text-align: center">初始库存</div>
|
|
|
- <div style="width: 100px;text-align: center">库存预警</div>
|
|
|
- </div>
|
|
|
- <ul class="infinite-list" v-infinite-scroll="load" style="height: calc(100% - 80px);overflow:auto">
|
|
|
- <li v-for="i in count" class="flex-center infinite-list-item">
|
|
|
- <div style="width: 70px;text-align: center" >
|
|
|
- <spam class="el-icon-success" style="color: #b3b3b3"></spam>
|
|
|
- </div>
|
|
|
- <div style="width: 70px;text-align: center">
|
|
|
- <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
|
|
|
-
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="flex-center item-menu-box">
|
|
|
- <div class="flex-center-center" style="width: 100px;height: 30px;color: #ffffff;background: #008ad3;border-radius: 5px">保存</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="class-list">
|
|
|
- <div class="flex-center-center " v-for="res in 30">分类</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'item_add',
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- count: 0,
|
|
|
- input: 0,
|
|
|
- checked:false,
|
|
|
- checkedAll:false,
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- mounted(){
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getList(){
|
|
|
- this.$service.ptItemClass.getAllClass().then(res => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- },
|
|
|
- allSelectItem(e){
|
|
|
- console.log(e)
|
|
|
- },
|
|
|
- load () {
|
|
|
- this.count += 2
|
|
|
- }
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|