58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<template>
|
|
<!-- 单元格布局 -->
|
|
<view
|
|
class="cell-main"
|
|
:hover-class="isTouch ? 'touch-hover' : ''"
|
|
:style="{ '--border-width': borderWidth, marginTop: mT + 'rpx', '--m-rl': mRL + 'rpx', backgroundColor: bgColor }"
|
|
>
|
|
<view class="title" :style="{ color: color }"> {{ title }} </view>
|
|
<slot name="right">
|
|
<image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
|
|
</slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
title: { type: String }, //标题
|
|
mT: { type: Number }, //上边距
|
|
mRL: { type: Number }, //左右两侧边距
|
|
bgColor: { type: String }, //背景颜色
|
|
color: { type: String }, //标题字体颜色
|
|
borderWidth: { type: String, default: '100vw' }, //边框距离左侧距离 默认100vw 没有边框
|
|
isTouch: { type: Boolean, default: true }, //是否有触摸反馈
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cell-main {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: var(--m-rl);
|
|
margin-right: var(--m-rl);
|
|
height: 120rpx;
|
|
.title {
|
|
margin-left: 40rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
}
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
background-color: #fff;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: calc(100vw - var(--border-width));
|
|
height: 1rpx;
|
|
background-color: #ededed;
|
|
}
|
|
}
|
|
</style>
|