提交 7c52e83c authored 作者: zgy's avatar zgy

海报管理优化

上级 e94a2d49
...@@ -36,6 +36,24 @@ ...@@ -36,6 +36,24 @@
display: flex; display: flex;
justify-content: start; justify-content: start;
} }
.vRadio{
display: inline-block;
width:20px;
height:20px;
background:#eeeeee;
border-radius: 4px;
transition: all 0.4s;
}
.vradio-wrapper{
cursor: pointer;
}
.vRadio-active{
background:#000;
opacity: 0.6;
}
.vradio-wrapper>i{
vertical-align:top;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -80,46 +98,51 @@ ...@@ -80,46 +98,51 @@
<img v-bind:src="tbCfPosters.postersPicture" v-show="!!tbCfPosters.postersPicture"/> <img v-bind:src="tbCfPosters.postersPicture" v-show="!!tbCfPosters.postersPicture"/>
<input type="file" placeholder="图片" @change="tirggerFile($event)"/> <input type="file" placeholder="图片" @change="tirggerFile($event)"/>
</Form-item> </Form-item>
<Form-item label="跳转链接" prop="redirectUrl"> <!-- <Form-item label="跳转链接" prop="redirectUrl">-->
<i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/> <!-- <i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/>-->
</Form-item> <!-- </Form-item>-->
<div id="app"> <div id="app">
<Card class="category-container" > <Card class="category-container" >
<p slot="title"> <p slot="title">
<label v-for="(element,index) in items" :key='index' style="margin-left:20px;"> <span
<input type="checkbox" :checked='element.isChecked' @click='vHandleChange(element,index)' class="v-radio"/> v-for="(element,index) in items" :key='index'
{{element.name}} @click='vHandleChange(element,index)'
</label> style="margin-left:20px;"
class="vradio-wrapper"
>
<span class="vRadio" :class="[element.isChecked?'vRadio-active':null]"></span>
<i>{{element.name}}</i>
</span>
</p> </p>
<section class="edit-container"> <section class="edit-container">
<!-- 链接 --> <!-- 链接 -->
<div v-if='active==0'> <div v-if='typeActive==0'>
<i-Input v-model="link" placeholder="请输入目标链接" /> <i-Input v-model="link" placeholder="请输入目标链接" />
</div> </div>
<!-- 分类子页面 --> <!-- 分类子页面 -->
<div v-else-if='active==1'> <!-- <div v-else-if='typeActive==1'>-->
<span>一级分类</span> <!-- <span>一级分类</span>-->
<i-Select v-model="subcategoryListsActive" style="width:200px"> <!-- <i-Select v-model="subcategoryListsActive" style="width:200px" @on-change="changeSubCateType">-->
<i-Option v-for="item in subCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <!-- <i-Option v-for="item in subCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>-->
</i-Select> <!-- </i-Select>-->
<span style="margin-left:20px;">二级分类</span> <!-- <span style="margin-left:20px;">二级分类</span>-->
<i-Select v-model="subsubCategoryListsActive" style="width:200px"> <!-- <i-Select v-model="subsubCategoryListsActive" style="width:200px">-->
<i-Option v-for="item in subsubCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <!-- <i-Option v-for="item in subsubCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>-->
</i-Select> <!-- </i-Select>-->
</div> <!-- </div>-->
<!-- 商品列表页 --> <!-- 商品列表页 -->
<div v-else-if='active==2' > <div v-else-if='typeActive==1' >
<div class="productList"> <div class="productList">
<div> <div>
<span>一级分类</span> <span>一级分类</span>
<i-Select v-model="categoryListsActive1" style="width:100px"> <i-Select v-model="categoryListsActive1" style="width:100px" @on-change="changeSubCateType">
<i-Option v-for="item in CategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in CategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
<div> <div>
<span style="margin-left:20px;">二级分类</span> <span style="margin-left:20px;" >二级分类</span>
<i-Select v-model="categoryListsActive2" style="width:100px"> <i-Select v-model="categoryListsActive2" @on-change="queryMiniCatagory(2)" style="width:100px">
<i-Option v-for="item in CategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in CategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
...@@ -143,13 +166,13 @@ ...@@ -143,13 +166,13 @@
<div class="productList-style-start"> <div class="productList-style-start">
<div> <div>
<span>一级分类</span> <span>一级分类</span>
<i-Select v-model="commoditycategoryListsActive1" style="width:100px"> <i-Select v-model="commoditycategoryListsActive1" style="width:100px" @on-change="changeSubCateType">
<i-Option v-for="item in commodityCategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in commodityCategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
<div> <div>
<span style="margin-left:20px;">二级分类</span> <span style="margin-left:20px;" >二级分类</span>
<i-Select v-model="commoditycategoryListsActive2" style="width:100px"> <i-Select v-model="commoditycategoryListsActive2" @on-change="queryMiniCatagory(3)" style="width:100px">
<i-Option v-for="item in commodityCategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in commodityCategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
...@@ -167,17 +190,18 @@ ...@@ -167,17 +190,18 @@
<i-Button type="primary" style="width:100px;" @click='handleSearch()'>搜索</i-Button> <i-Button type="primary" style="width:100px;" @click='handleSearch()'>搜索</i-Button>
<i-Button style="width:100px;" @click="resetSelectedCategory('commodity')">重置</i-Button> <i-Button style="width:100px;" @click="resetSelectedCategory('commodity')">重置</i-Button>
</div> </div>
<section> <section id="showItems">
表格内容。。。 表格内容。。。
</section> </section>
</div> </div>
<div class="btn-container"> <!-- <div class="btn-container">-->
<i-Button type="primary" @click='submit()'>确定</i-Button> <!-- <i-Button type="primary" @click='submit()'>确定</i-Button>-->
<i-Button >取消</i-Button> <!-- <i-Button >取消</i-Button>-->
</div> <!-- </div>-->
</section> </section>
</Card> </Card>
</div> </div>
<br/>
<Form-item label="是否展示" prop="isShow"> <Form-item label="是否展示" prop="isShow">
<i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/> <i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/>
</Form-item> </Form-item>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论