59 lines
1019 B
Vue
59 lines
1019 B
Vue
<template lang="pug">
|
|
.tvList
|
|
.listItem(v-for="(item,index) in listData" :key="index" @click="itemClick(index)")
|
|
span(:class="index==active ? 'red' : '' ") {{ item.title }}
|
|
img(src="/img/act-list.gif" v-if="index==active")
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TvList",
|
|
props: {
|
|
listData: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
isActive: {
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
active: this.isActive
|
|
}
|
|
},
|
|
async created() {
|
|
},
|
|
methods: {
|
|
itemClick(i) {
|
|
this.active = i;
|
|
this.$emit("change",i)
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.listItem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.507rem 0.813rem;
|
|
align-items: center;
|
|
border-top: 1px solid #e5e5e5;
|
|
.red {
|
|
color: red;
|
|
}
|
|
span {
|
|
font-size: 0.427rem;
|
|
}
|
|
img {
|
|
width: 0.36rem;
|
|
height: 0.4rem;
|
|
}
|
|
&:last-child {
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
}
|
|
</style>
|