117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<template>
|
|
<view class="_list" :style="{borderBottom:noborder?'none':''}">
|
|
<view class="_icon" v-if="icon">
|
|
<ciy-svgimg :src="icon"></ciy-svgimg>
|
|
</view>
|
|
<view class="_title">{{title}}</view>
|
|
<slot></slot>
|
|
<view class="_right txt-wl" v-if="right" v-html="right"></view>
|
|
<view class="_reddot" v-if="reddot">{{reddot>99?'99+':reddot}}</view>
|
|
<view class="_more" v-if="more"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._list {
|
|
position: relative;
|
|
background: var(--bg2);
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--bg6);
|
|
height: 3.5em;
|
|
}
|
|
|
|
._list>._icon {
|
|
pointer-events: none;
|
|
flex-shrink: 0;
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
margin-left: 0.7em;
|
|
}
|
|
|
|
._list>._title {
|
|
pointer-events: none;
|
|
flex: 1;
|
|
margin-left: 1em;
|
|
white-space: nowrap;
|
|
color: var(--txt9);
|
|
/* overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 7em; */
|
|
line-height: 1.1em;
|
|
}
|
|
|
|
._list>._right {
|
|
pointer-events: none;
|
|
text-align: right;
|
|
margin: 0 1em;
|
|
line-height: 1.2em;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
color: var(--txt6);
|
|
}
|
|
|
|
._list>._more {
|
|
pointer-events: none;
|
|
margin-right: 1em;
|
|
width: 1em;
|
|
height: 1em;
|
|
flex-shrink: 0;
|
|
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTM5Mi4zMDgzNjQgNzEuODE5NjM2YTU4LjE4MTgxOCA1OC4xODE4MTggMCAwIDAtNzcuOTE3MDkxIDg2LjMxODU0NmwzLjA3MiAyLjc5MjcyNyAzNzkuOTA0IDMxOS4wOTIzNjRhMzQuOTA5MDkxIDM0LjkwOTA5MSAwIDAgMSA0LjI1ODkwOSA0OS4xOTg1NDVsLTEuODM4NTQ2IDIuMDI0NzI3LTIuMDAxNDU0IDEuODYxODE5TDMxNi43NDE4MTggODYzLjcyMDcyN0E1OC4xODE4MTggNTguMTgxODE4IDAgMCAwIDM4OS44MTgxODIgOTU0LjE4MTgxOGwzLjIzNDkwOS0yLjYyOTgxOCAzODAuOTk3ODE4LTMzMC41NDI1NDVhMTUxLjI3MjcyNyAxNTEuMjcyNzI3IDAgMCAwIDIuNTYtMjI2LjI4MDcyOGwtNC4zNzUyNzMtMy44MTY3MjdMMzkyLjMwODM2NCA3MS44MTk2MzZ6JyBmaWxsPScjOTk5OTk5Jz48L3BhdGg+PC9zdmc+");
|
|
}
|
|
|
|
._list ._reddot{
|
|
background: var(--dag5);
|
|
border:1px solid var(--dag6);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color:var(--bg1);
|
|
height:2.5em;
|
|
width:2.5em;
|
|
line-height: 2.5em;
|
|
font-size:0.6em;
|
|
margin:0 1em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
right: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
more: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
noborder: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
reddot: {
|
|
type: [String, Number],
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
}
|
|
}
|
|
</script> |