145 lines
3.8 KiB
Vue
145 lines
3.8 KiB
Vue
<template>
|
||
<view :style="`${phone}-style`">
|
||
<uni-swipe-action class="swipe-action">
|
||
<!-- 使用插槽 （请自行给定插槽内容宽度）-->
|
||
<uni-swipe-action-item>
|
||
<view>
|
||
<view class="item flex-align-center">
|
||
<view class="dot"></view>
|
||
<image class="img shrink-0" :src="`/static/image/phone-message/${phone}/default.png`"></image>
|
||
<view class="border-box m-l-24 flex-1 flex flex-align-start">
|
||
<view class="main-box flex-1">
|
||
<view class="title-box flex-between">
|
||
<text class="title">title</text>
|
||
<text class="time">昨天</text>
|
||
</view>
|
||
<view class="content">市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好...</view>
|
||
</view>
|
||
<view class="box-right h100 flex-column flex-align-center">
|
||
<uni-icons type="right" size="14" color="#C1C1C1"></uni-icons>
|
||
<image class="img" src="/static/image/phone-message/iphone/notice.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-slot:right>
|
||
<view><text>删除</text></view>
|
||
</template>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed
|
||
} from 'vue'
|
||
import {
|
||
util
|
||
} from '@/utils/common.js';
|
||
|
||
const props = defineProps({
|
||
// 手机品牌
|
||
phone: {
|
||
type: String,
|
||
default: 'iphone'
|
||
}
|
||
})
|
||
</script>
|
||
<style>
|
||
@import '@/common/main.css';
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.m-t-4 {
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.m-l-24 {
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.iphone-style {
|
||
|
||
.swipe-action {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.item:first-child {
|
||
.border-box {
|
||
position: relative;
|
||
}
|
||
|
||
.border-box::before {
|
||
position: absolute;
|
||
content: '';
|
||
width: 100%;
|
||
height: 1px;
|
||
top: -1px;
|
||
left: 0;
|
||
right: 0;
|
||
box-shadow: 0 0.3px 0 0 #C2C2C2;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
padding: 0 0 0 14rpx;
|
||
height: 146rpx;
|
||
|
||
.dot {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #007BFD;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.img {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.border-box {
|
||
padding: 18rpx 14rpx 14rpx 0;
|
||
height: 100%;
|
||
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||
}
|
||
|
||
.main-box {
|
||
.title-box {
|
||
margin-bottom: 6rpx;
|
||
|
||
.title {
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.time {
|
||
color: #838383;
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #838383;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-right {
|
||
.img {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |