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