67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
|
<view class="line" :class="{ 'border-none': props.isBorder }" :style="{ marginLeft: ml, padding: pd }">
|
|
<image :src="props.iconOn" class="icon" v-if="props.isSelect && iconOn != ''"></image>
|
|
<image :src="props.iconClose" class="icon" v-else-if="iconOn != ''"></image>
|
|
<view class="name single-text-beyond" :class="{ color: props.isSelect }">{{ props.name }}</view>
|
|
<view class="name right-text" :class="{ color: props.isSelect }">
|
|
{{ text }}
|
|
<image src="/static/equipmentImg/check.svg" class="select" v-if="props.isSelect"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
|
|
const props = defineProps({
|
|
iconOn: { type: String, default: "" },
|
|
iconClose: { type: String, default: "" },
|
|
name: { type: String, default: "" },
|
|
isSelect: { type: Boolean, default: false },
|
|
isBorder: { type: Boolean, default: false },
|
|
text: { type: String },
|
|
ml: { type: String },
|
|
pd: { type: String },
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.line {
|
|
border-top: 1rpx solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
.icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.name {
|
|
max-width: 300rpx;
|
|
color: #333333;
|
|
font-size: 33rpx;
|
|
line-height: 46rpx;
|
|
flex-grow: 1;
|
|
margin: 0 20rpx;
|
|
}
|
|
.right-text {
|
|
text-align: right;
|
|
}
|
|
.select {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.color {
|
|
color: $primaryColor !important;
|
|
}
|
|
|
|
.border-none {
|
|
border: none;
|
|
}
|
|
</style>
|