parent
f413addc6c
commit
a37837d40c
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 175 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="my-inputs">
|
||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
||||
<div class="btn" @click="inputValue"><i class="el-icon-search"></i></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input:'',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
inputValue(){
|
||||
this.$emit('changeInput',this.input)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.my-inputs {
|
||||
display: flex;
|
||||
::v-deep .el-input {
|
||||
width: 515px;
|
||||
height: 40px;
|
||||
.el-input__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border: 1px solid #DBD7D7;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background-color: #F8414D;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-09-18 10:08:30
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-09-18 16:21:18
|
||||
-->
|
||||
<template>
|
||||
<div class="plan-management">
|
||||
<div class="plan-topBox">
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="活动推荐" name="recommendView"></el-tab-pane>
|
||||
<el-tab-pane label="活动邀请" name="inviteView"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<my-input @changeInput="changeInput"></my-input>
|
||||
</div>
|
||||
<div class="plan-bottomBox">
|
||||
<component :is="defaultRouter" :value="input"></component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import inviteView from '../components/invite.vue'
|
||||
import recommendView from '../components/recommend.vue'
|
||||
import myInput from "@/views/components/myInput/index.vue"
|
||||
export default {
|
||||
components:{inviteView,recommendView,myInput},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
activeName: 'recommendView',
|
||||
defaultRouter:'recommendView'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 输入框的值
|
||||
changeInput(value){
|
||||
this.input = value;
|
||||
},
|
||||
handleClick() {
|
||||
this.defaultRouter = this.activeName
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.plan-management {
|
||||
padding: 0 20px 10px 20px;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
|
||||
.plan-topBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0 0 0;
|
||||
::v-deep .el-tabs--top {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.plan-bottomBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-09-18 10:08:30
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-09-18 16:26:48
|
||||
-->
|
||||
<template>
|
||||
<div class="mainBox">
|
||||
<div class="convert-topBox">
|
||||
<my-input @changeInput="changeInput"></my-input>
|
||||
</div>
|
||||
<div class="convert-content">
|
||||
<div class="integral-lists">
|
||||
<div class="list" v-for="item in certificateList">
|
||||
<div class="list-top" :class="item.type == 1 ? 'top-two' : item.type == 2 ? 'top-three' : '' "></div>
|
||||
<div class="list-bottom">
|
||||
<span class="bottom-left">{{ item.type == 0 ? '高级' : item.type == 1 ? '中级' : '初级' }}</span>
|
||||
<span class="bottom-right">兑换</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import myInput from "@/views/components/myInput/index.vue"
|
||||
import myPagination from "@/views/components/myPagination/index.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
total:0,
|
||||
certificateList:[
|
||||
{
|
||||
type:2,
|
||||
},{
|
||||
type:1,
|
||||
},{
|
||||
type:0,
|
||||
},{
|
||||
type:2,
|
||||
},{
|
||||
type:1,
|
||||
},{
|
||||
type:0,
|
||||
},{
|
||||
type:2,
|
||||
},{
|
||||
type:1,
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {
|
||||
myInput,myPagination
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
pagesChange(pages){
|
||||
|
||||
},
|
||||
changeInput(e){
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mainBox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background-color: #fff;
|
||||
padding: 0 20px 10px 20px;
|
||||
box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
|
||||
.convert-topBox {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
.convert-content {
|
||||
.integral-lists {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 290px);
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 10px;
|
||||
.list {
|
||||
width: 300px;
|
||||
height: 275px;
|
||||
// background: linear-gradient(0deg, #EFE6D9, #DDC9AC);
|
||||
box-shadow: 0px 3px 15px 0px rgba(184,184,184,0.22);
|
||||
border-radius: 10px;
|
||||
.list-top {
|
||||
background: url('../../../assets/images/icon1.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 238px;
|
||||
width: 100%;
|
||||
}
|
||||
.top-two {
|
||||
background: url('../../../assets/images/icon2.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.top-three {
|
||||
background: url('../../../assets/images/icon3.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.list-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2px 20px;
|
||||
.bottom-left {
|
||||
font-size: 16px;
|
||||
font-family: FZDaBiaoSong-B06S;
|
||||
font-weight: 400;
|
||||
color: #4D4949;
|
||||
}
|
||||
.bottom-right {
|
||||
padding: 3px 15px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(249,86,95,0.1);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-weight: 400;
|
||||
color: #F8414D;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue