<template>
<div class="default">
<div class="default_box">
<div class="title">
<span class="title_name">请选择默认默认广告账户</span>
<span class="title_diail">进入系统后仍可以随意切换</span>
</div>
<div>
<div :class="[className, { active: item.id === selectedId }]" @click="tabSelect(item.id)"
v-for="item in accountList" :key="item.id">
<div class="box_title">{{ item.title }}</div>
<div class="box_id">ID:{{ item.id }}</div>
</div>
</div>
<a class="button">进入系统</a>
</div>
</div>
</template>
<script>
export default {
name: 'SelectDefaultAccount',
data() {
return {
accountList: [
{ title: '奥特曼', id: 12456791 },
{ title: '喜羊羊', id: 12456792 },
{ title: '美羊羊', id: 12456793 }
],
className: 'box_item',
selectedId: null
}
},
methods: {
tabSelect(id) {
this.selectedId = id
}
}
}
</script>
<style lang="less" scoped>
.default {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
.active {
background-color: #dce5fd !important;
border: 1px solid #2953ff !important;
.box_title {
color: #2953ff !important;
}
}
.default_box {
width: 550px;
height: 400px;
margin: 0px auto;
margin-top: 100px;
.title {
width: 100%;
height: 40px;
line-height: 40px;
user-select: none;
.title_name {
color: #3D3D3D;
font-size: 14px;
font-weight: 600;
}
.title_diail {
color: #999999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
}
}
}
.box_item {
width: 509px;
height: 49px;
background-color: #f1f1f1;
border-radius: 5px;
border: 1px solid #cccccc;
padding: 20px 20px;
margin-top: 10px;
cursor: pointer;
user-select: none;
.box_title {
font-size: 14px;
font-weight: 600;
color: #3D3D3D;
}
.box_id {
display: inline-block;
margin-top: 10px;
font-size: 12px;
color: #999999;
}
}
.button {
width: 80px;
height: 30px;
background-color: #2953ff;
color: #ffffff;
margin-top: 10px;
float: right;
border: 0;
user-select: none;
}
}
</style>
vue-demo 之 选项切换
于 2023-05-10 17:48:29 首次发布
该代码示例展示了一个Vue.js组件,用于从账户列表中选择默认广告账户。用户可以点击条目进行选择,选中的项会被高亮显示,且有进入系统的按钮。
摘要由CSDN通过智能技术生成