封装通话组件
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<view class="header" :class="['header_'+type]">
|
||||
<view class="title">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="search">
|
||||
<view class="left">
|
||||
<image src="/static/image/call/iosSearchLeft.png" mode=""></image>
|
||||
{{searchTitle}}
|
||||
</view>
|
||||
<image v-if="type=='ios'" src="/static/image/call/iosSearchRight.png" mode=""></image>
|
||||
</view>
|
||||
<view class="select" v-if="type=='xiaomi'">
|
||||
全部通话
|
||||
<image src="/static/image/call/xiaomiHeaderSelectImg.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs
|
||||
} from 'vue'
|
||||
|
||||
const topPopup = ref()
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
|
||||
type: {
|
||||
type: String,
|
||||
default: 'ios'
|
||||
},
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
statusBarHeight: 0,
|
||||
showTipLayer: true,
|
||||
title:'最近通话',
|
||||
searchTitle:"搜索",
|
||||
list:[
|
||||
"个人收藏",
|
||||
"最近通话",
|
||||
"通讯录",
|
||||
"拨号键盘",
|
||||
"语音留言"
|
||||
]
|
||||
})
|
||||
|
||||
let {
|
||||
searchTitle,
|
||||
title,
|
||||
list,
|
||||
showTipLayer
|
||||
} = toRefs(data)
|
||||
|
||||
onMounted(() => {
|
||||
if(props.type=='xiaomi'){
|
||||
searchTitle.value="搜索联系人"
|
||||
title.value="通话"
|
||||
console.log('aaaaaaaaaaa')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header{
|
||||
padding: 0 15px;
|
||||
background-color: #fff;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.search{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
background: #EEEEF0;
|
||||
border-radius: 12px 12px 12px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #838383;
|
||||
}
|
||||
image{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.select{
|
||||
padding-left: 15px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #8B8DA5;
|
||||
image{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_xiaomi{
|
||||
.title{
|
||||
padding-left: 15px;
|
||||
font-weight: 400 !important;
|
||||
font-size: 30px !important;
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
.search{
|
||||
margin-top: 10px;
|
||||
height: 41px !important;
|
||||
background: #F0F0F0 !important;
|
||||
border-radius: 21px 21px 21px 21px !important;
|
||||
.left{
|
||||
font-size: 16px !important;
|
||||
color: #AAAAAA !important;
|
||||
}
|
||||
image{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,19 @@
|
|||
<template>
|
||||
<view class="call-list" :class="['call-list-'+type]">
|
||||
<view v-for="(item,index) in list" :key="index" class="item">
|
||||
<view v-for="(item,index) in list" :key="index" class="item"
|
||||
@touchstart="touchStart($event, index)"
|
||||
@touchmove="touchMove($event, index)"
|
||||
@touchend="touchEnd($event, index)"
|
||||
:style="{'transform': 'translateX(' + swiperList[index] + 'px)', 'transition': swiperList[index] == 0 ? 'all 0.3s' : ''}">
|
||||
<view class="avatar" v-if="type!='xiaomi'">
|
||||
<image v-if="type=='ios'" :src="'/static/image/call/iosAvatar.png'||item.avatar" mode=""></image>
|
||||
<image v-else-if="type=='oppo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix"></image>
|
||||
<image v-else-if="type=='oppo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix">
|
||||
</image>
|
||||
<image v-else-if="type=='huawei'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`"
|
||||
mode="widthFix"></image>
|
||||
<image v-else-if="type=='vivo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix">
|
||||
</image>
|
||||
|
||||
</view>
|
||||
<view class="infoBox">
|
||||
<view class="left-box">
|
||||
|
|
@ -18,18 +28,28 @@
|
|||
{{item.name||item.notes||item.phone}}
|
||||
<text v-if="!item.name&&item.notes">{{item.phone}}</text>
|
||||
</view>
|
||||
<view class="notes" v-else-if="type='oppo'">
|
||||
<view class="notes" v-else-if="type=='oppo'">
|
||||
{{item.name||item.phone}}
|
||||
</view>
|
||||
<view class="notes" v-else-if="type=='huawei'">
|
||||
{{item.name||item.phone}}
|
||||
</view>
|
||||
<view class="notes" v-else-if="type=='vivo'">
|
||||
{{item.name||item.phone}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
|
||||
<!-- 电话 -->
|
||||
<view class="phone" v-if="type=='vivo'">
|
||||
{{item.notes||item.phone}}
|
||||
</view>
|
||||
<!-- 卡几 -->
|
||||
<view class="kj" v-if="type!='ios'&&type!='xiaomi'&&(type=='oppo')">
|
||||
<view class="kj" v-if="type=='oppo'||type=='huawei'">
|
||||
<image :src="`/static/image/call/${type}KJ${item.kj}.png`" mode=""></image>
|
||||
</view>
|
||||
<!-- 时间 -->
|
||||
<view class="time" v-if="type!='ios'&&(type=='xiaomi')">
|
||||
<view class="time" v-if="type=='xiaomi'">
|
||||
{{item.time}}
|
||||
</view>
|
||||
<!-- icon -->
|
||||
|
|
@ -37,7 +57,7 @@
|
|||
<image src="/static/image/call/iosStatusIcon.png" mode=""></image>
|
||||
</view>
|
||||
<!-- 地址 -->
|
||||
<view class="address" v-if="type!='ios'&&(type=='xiaomi'||type=='oppo')">
|
||||
<view class="address" v-if="type!='ios'">
|
||||
{{item.address}}
|
||||
</view>
|
||||
<!-- 运营商 -->
|
||||
|
|
@ -45,11 +65,11 @@
|
|||
{{item.yys}}
|
||||
</view>
|
||||
<!-- 电话 -->
|
||||
<view class="phone" v-if="type!='xiaomi'&&type!='oppo'">
|
||||
<view class="phone" v-if="type=='ios'">
|
||||
{{item.phone}}
|
||||
</view>
|
||||
<!-- 备注 -->
|
||||
<view class="notes" v-if="type=='oppo'">
|
||||
<view class="notes" v-if="type=='oppo'||type=='huawei'">
|
||||
{{item.notes}}
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -57,24 +77,27 @@
|
|||
</view>
|
||||
<view class="right-box">
|
||||
<!-- 时间 -->
|
||||
<view class="time" v-if="type=='ios'&&(type!='xiaomi')">
|
||||
<view class="time" v-if="type!='xiaomi'">
|
||||
{{item.time}}
|
||||
</view>
|
||||
<!-- 图标 -->
|
||||
<view class="icon" v-if="type=='ios'||type=='xiaomi'||type=='oppo'">
|
||||
<view class="icon">
|
||||
<image :src="`/static/image/call/${type}RightIcon.png`" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 删除按钮 -->
|
||||
<view class="delete-btn" @click="deleteItem(index)">
|
||||
<text class="delete-text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'call-list',
|
||||
props: {
|
||||
const props = defineProps({
|
||||
isHuise: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
@ -83,79 +106,393 @@ export default {
|
|||
type: String,
|
||||
default: 'ios'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{
|
||||
avatar: '/static/logo.png',
|
||||
title: '18888888888',
|
||||
name: '大王',
|
||||
phone: '18888888888',
|
||||
phoneNotes: '电话',
|
||||
yys: '移动',
|
||||
kj: '1',
|
||||
address: '重庆',
|
||||
time: '星期一',
|
||||
icon: '/static/logo.png',
|
||||
status: 0,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3:未接 4:已接 5:已拒绝
|
||||
notes: '骚扰电话',
|
||||
});
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
"avatar": "/static/avatar/1.png",
|
||||
"title": "13912345678",
|
||||
"name": "李强",
|
||||
"phone": "13912345678",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "3",
|
||||
"address": "北京",
|
||||
"time": "星期一",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 1,
|
||||
"notes": "工作往来"
|
||||
},
|
||||
{
|
||||
avatar: '/static/logo.png',
|
||||
title: '18888888888',
|
||||
name: '',
|
||||
phone: '18888888888',
|
||||
phoneNotes: '电话',
|
||||
yys: '移动',
|
||||
kj: '1',
|
||||
address: '重庆',
|
||||
time: '星期一',
|
||||
icon: '/static/logo.png',
|
||||
status: 1,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3:未接 4:已接 5:已拒绝
|
||||
notes: '骚扰电话',
|
||||
|
||||
"avatar": "/static/avatar/2.png",
|
||||
"title": "15887654321",
|
||||
"name": "王芳",
|
||||
"phone": "15887654321",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "联通",
|
||||
"kj": "2",
|
||||
"address": "上海",
|
||||
"time": "星期二",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 4,
|
||||
"notes": "老朋友"
|
||||
},
|
||||
]
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "18711223344",
|
||||
"name": "张伟",
|
||||
"phone": "18711223344",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "1",
|
||||
"address": "广州",
|
||||
"time": "星期三",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 0,
|
||||
"notes": "推销电话"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/4.png",
|
||||
"title": "13644556677",
|
||||
"name": "刘洋",
|
||||
"phone": "13644556677",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "电信",
|
||||
"kj": "5",
|
||||
"address": "深圳",
|
||||
"time": "星期四",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 2,
|
||||
"notes": "快递小哥"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/5.png",
|
||||
"title": "17788889999",
|
||||
"name": "陈静",
|
||||
"phone": "17788889999",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "联通",
|
||||
"kj": "2",
|
||||
"address": "杭州",
|
||||
"time": "星期五",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 3,
|
||||
"notes": "大学同学"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "15133334444",
|
||||
"name": "赵雷",
|
||||
"phone": "15133334444",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "4",
|
||||
"address": "成都",
|
||||
"time": "星期一",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 5,
|
||||
"notes": "骚扰电话"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/7.png",
|
||||
"title": "18966667777",
|
||||
"name": "孙丽",
|
||||
"phone": "18966667777",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "电信",
|
||||
"kj": "3",
|
||||
"address": "武汉",
|
||||
"time": "星期二",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 1,
|
||||
"notes": "客户"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/8.png",
|
||||
"title": "15555558888",
|
||||
"name": "周涛",
|
||||
"phone": "15555558888",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "联通",
|
||||
"kj": "1",
|
||||
"address": "西安",
|
||||
"time": "星期三",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 4,
|
||||
"notes": "家人"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "13011112222",
|
||||
"name": "吴杰",
|
||||
"phone": "13011112222",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "电信",
|
||||
"kj": "5",
|
||||
"address": "南京",
|
||||
"time": "星期四",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 0,
|
||||
"notes": "广告推销"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/10.png",
|
||||
"title": "18899990000",
|
||||
"name": "郑爽",
|
||||
"phone": "18899990000",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "2",
|
||||
"address": "长沙",
|
||||
"time": "星期五",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 2,
|
||||
"notes": "同事"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "15712345678",
|
||||
"name": "王磊",
|
||||
"phone": "15712345678",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "3",
|
||||
"address": "天津",
|
||||
"time": "星期一",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 3,
|
||||
"notes": "未知号码"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/12.png",
|
||||
"title": "15287654321",
|
||||
"name": "李娜",
|
||||
"phone": "15287654321",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "联通",
|
||||
"kj": "4",
|
||||
"address": "苏州",
|
||||
"time": "星期二",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 5,
|
||||
"notes": "健身房"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/13.png",
|
||||
"title": "18799887766",
|
||||
"name": "张敏",
|
||||
"phone": "18799887766",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "1",
|
||||
"address": "青岛",
|
||||
"time": "星期三",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 1,
|
||||
"notes": "学校老师"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "13655443322",
|
||||
"name": "刘东",
|
||||
"phone": "13655443322",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "电信",
|
||||
"kj": "5",
|
||||
"address": "大连",
|
||||
"time": "星期四",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 4,
|
||||
"notes": "保险推销"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/15.png",
|
||||
"title": "17722334455",
|
||||
"name": "陈龙",
|
||||
"phone": "17722334455",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "联通",
|
||||
"kj": "2",
|
||||
"address": "厦门",
|
||||
"time": "星期五",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 0,
|
||||
"notes": "外卖"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/16.png",
|
||||
"title": "15166778899",
|
||||
"name": "赵雅",
|
||||
"phone": "15166778899",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "3",
|
||||
"address": "宁波",
|
||||
"time": "星期一",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 2,
|
||||
"notes": "亲戚"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "18911223344",
|
||||
"name": "孙浩",
|
||||
"phone": "18911223344",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "电信",
|
||||
"kj": "4",
|
||||
"address": "郑州",
|
||||
"time": "星期二",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 3,
|
||||
"notes": "房产中介"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/18.png",
|
||||
"title": "15544332211",
|
||||
"name": "周梅",
|
||||
"phone": "15544332211",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "联通",
|
||||
"kj": "1",
|
||||
"address": "沈阳",
|
||||
"time": "星期三",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 5,
|
||||
"notes": "银行客服"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/avatar/19.png",
|
||||
"title": "13099887766",
|
||||
"name": "吴刚",
|
||||
"phone": "13099887766",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "电信",
|
||||
"kj": "2",
|
||||
"address": "济南",
|
||||
"time": "星期四",
|
||||
"icon": "/static/icon/call.png",
|
||||
"status": 1,
|
||||
"notes": "合作伙伴"
|
||||
},
|
||||
{
|
||||
"avatar": "/static/logo.png",
|
||||
"title": "18818818818",
|
||||
"name": "郑丽",
|
||||
"phone": "18818818818",
|
||||
"phoneNotes": "电话",
|
||||
"yys": "移动",
|
||||
"kj": "5",
|
||||
"address": "重庆",
|
||||
"time": "星期五",
|
||||
"icon": "/static/logo.png",
|
||||
"status": 4,
|
||||
"notes": "骚扰电话"
|
||||
}
|
||||
]);
|
||||
|
||||
const swiperList = ref([]); // 存储每个item的滑动距离
|
||||
const startX = ref(0); // 触摸开始X坐标
|
||||
const startY = ref(0); // 触摸开始Y坐标
|
||||
const deleteWidth = ref(70); // 删除按钮宽度
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化swiperList数组
|
||||
swiperList.value = new Array(list.value.length).fill(0);
|
||||
});
|
||||
|
||||
watch(() => props.isHuise, (newValue, oldValue) => {
|
||||
console.log(newValue);
|
||||
});
|
||||
|
||||
// 触摸开始
|
||||
const touchStart = (e, index) => {
|
||||
startX.value = e.changedTouches[0].clientX;
|
||||
startY.value = e.changedTouches[0].clientY;
|
||||
// 关闭其他item的滑动
|
||||
swiperList.value.forEach((item, i) => {
|
||||
if (i !== index) {
|
||||
swiperList.value[i] = 0;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
isHuise(newValue, oldValue) {
|
||||
console.log(newValue)
|
||||
|
||||
// 触摸移动
|
||||
const touchMove = (e, index) => {
|
||||
const moveX = e.changedTouches[0].clientX;
|
||||
const moveY = e.changedTouches[0].clientY;
|
||||
const disX = moveX - startX.value;
|
||||
const disY = moveY - startY.value;
|
||||
// 判断是否为左右滑动
|
||||
if (Math.abs(disX) > Math.abs(disY)) {
|
||||
// 阻止默认事件,防止页面滚动
|
||||
e.preventDefault();
|
||||
// 计算滑动距离,限制在0到-deleteWidth之间
|
||||
let distance = Math.max(-deleteWidth.value, Math.min(0, disX));
|
||||
swiperList.value[index] = distance;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
};
|
||||
|
||||
// 触摸结束
|
||||
const touchEnd = (e, index) => {
|
||||
const endX = e.changedTouches[0].clientX;
|
||||
const disX = endX - startX.value;
|
||||
// 判断是否滑动超过一半
|
||||
if (disX < -deleteWidth.value / 2) {
|
||||
swiperList.value[index] = -deleteWidth.value;
|
||||
} else {
|
||||
swiperList.value[index] = 0;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 删除item
|
||||
const deleteItem = (index) => {
|
||||
// 显示确认弹窗
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条通话记录吗?',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 删除item
|
||||
list.value.splice(index, 1);
|
||||
// 更新swiperList
|
||||
swiperList.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.call-list {
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
.infoBox{
|
||||
|
||||
.infoBox {
|
||||
width: calc(100% - 80rpx);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||||
background-color: #fff;
|
||||
|
||||
.left-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -167,26 +504,32 @@ export default {
|
|||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
view{
|
||||
|
||||
view {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.kj{
|
||||
|
||||
.kj {
|
||||
line-height: 0;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.status-icon{
|
||||
|
||||
.status-icon {
|
||||
line-height: 0;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -196,19 +539,23 @@ export default {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.time {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
overflow: hidden;
|
||||
margin-left: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -217,46 +564,81 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 删除按钮
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -160rpx;
|
||||
width: 160rpx;
|
||||
height: 100%;
|
||||
background-color: #FF3B30;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.delete-text {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.call-list-ios {
|
||||
.item{
|
||||
.delete-btn{
|
||||
right: -140rpx !important;
|
||||
width: 140rpx !important;
|
||||
height: 100% !important;
|
||||
background-color: #FF3B30;
|
||||
}
|
||||
.item {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 132rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 50%;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
.infoBox{
|
||||
|
||||
.infoBox {
|
||||
width: calc(100% - 136rpx) !important;
|
||||
padding: 24rpx 32rpx 24rpx 0;
|
||||
.left-box{
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||||
|
||||
.left-box {
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
line-height: 16px;
|
||||
}
|
||||
.title-red{
|
||||
|
||||
.title-red {
|
||||
color: #FC3E30 !important;
|
||||
}
|
||||
.info{
|
||||
|
||||
.info {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info .phone {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #838383;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.info .yys {
|
||||
height: 12px;
|
||||
background: #C7C7C7;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
padding:0 4rpx;
|
||||
padding: 0 4rpx;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
|
|
@ -264,18 +646,21 @@ export default {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
.right-box{
|
||||
|
||||
.right-box {
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #838383;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
overflow: hidden;
|
||||
margin-left: 14rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -284,50 +669,208 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.call-list-xiaomi{
|
||||
.infoBox{
|
||||
|
||||
.call-list-xiaomi {
|
||||
.item {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
width: 100% !important;
|
||||
padding: 34rpx 56rpx 28rpx 56rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
text{
|
||||
|
||||
text {
|
||||
font-size: 13px !important;
|
||||
color: #767676 !important;
|
||||
}
|
||||
}
|
||||
.title-red{
|
||||
|
||||
.title-red {
|
||||
color: #EE0115 !important;
|
||||
}
|
||||
.info{
|
||||
|
||||
view{
|
||||
.info {
|
||||
|
||||
view {
|
||||
font-size: 13px;
|
||||
color: #767676;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.call-list-oppo{
|
||||
.item{
|
||||
|
||||
.call-list-oppo {
|
||||
.item {
|
||||
padding: 32rpx 36rpx 0 36rpx !important;
|
||||
justify-content: space-between;
|
||||
height: 140rpx;
|
||||
}
|
||||
.infoBox{
|
||||
width: calc(100% - 20rpx);
|
||||
|
||||
.infoBox {
|
||||
width: calc(100% - 46rpx) !important;
|
||||
padding-bottom: 36rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.avatar{
|
||||
|
||||
.title-red {
|
||||
color: #DB2C22 !important;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
view {
|
||||
font-size: 13px;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.notes {
|
||||
color: #F17A30;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
.time {
|
||||
color: #767676;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 26rpx !important;
|
||||
height: 26rpx !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.call-list-vivo {
|
||||
.item {
|
||||
padding: 36rpx 52rpx 0 36rpx !important;
|
||||
justify-content: space-between;
|
||||
height: 140rpx;
|
||||
|
||||
.infoBox {
|
||||
width: calc(100% - 52rpx) !important;
|
||||
padding-bottom: 32rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.title-red {
|
||||
color: #F04E51 !important;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
view {
|
||||
font-size: 12px;
|
||||
color: #8C8C8C;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
.time {
|
||||
color: #8C8C8C;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32rpx !important;
|
||||
height: 32rpx !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.call-list-huawei {
|
||||
.item {
|
||||
padding: 24rpx 32rpx 0 32rpx !important;
|
||||
justify-content: space-between;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
width: calc(100% - 52rpx) !important;
|
||||
padding-bottom: 24rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.title-red {
|
||||
color: #E83F28 !important;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
view {
|
||||
font-size: 13px;
|
||||
color: #696969;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
.time {
|
||||
color: #696969;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32rpx !important;
|
||||
height: 32rpx !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true" >
|
||||
<template v-slot:left>
|
||||
<slot name="left">
|
||||
<view :class="[type+'LeftTitle']" v-if="type=='ios'">
|
||||
编辑
|
||||
</view>
|
||||
<view :class="[type+'LeftTitle']" v-else-if="type=='vivo'">
|
||||
拨号
|
||||
</view>
|
||||
<view :class="[type+'LeftTitle']" v-else-if="type=='oppo'">
|
||||
通话
|
||||
</view>
|
||||
<view :class="[type+'LeftTitle']" v-else-if="type=='huawei'">
|
||||
电话
|
||||
</view>
|
||||
</slot>
|
||||
</template>
|
||||
<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
|
||||
<slot>
|
||||
<view class="iosBox" v-if="type=='ios'">
|
||||
<view class="btn active">
|
||||
全部来电
|
||||
</view>
|
||||
<view class="btn">
|
||||
未接来电
|
||||
</view>
|
||||
</view>
|
||||
<view class="title" v-else-if="type=='xiaomi'" :style="{opacity: navOpacity}">
|
||||
通话
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<slot name="right">
|
||||
<image v-if="type!='ios'" class="rightImg" :class="['rightImg_'+type]" src="/static/image/call/xiaomiNavRightImg.png"></image>
|
||||
</slot>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
watch
|
||||
} from 'vue'
|
||||
|
||||
const topPopup = ref()
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'ios'
|
||||
},
|
||||
scrollTop:{
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
statusBarHeight: 0,
|
||||
showTipLayer: true,
|
||||
navOpacity: 0, // 导航栏透明度
|
||||
navBgColor: props.bgColor // 导航栏背景色
|
||||
})
|
||||
|
||||
let {
|
||||
showTipLayer,
|
||||
navOpacity,
|
||||
navBgColor
|
||||
} = toRefs(data)
|
||||
|
||||
// 监听 scrollTop 变化
|
||||
watch(() => props.scrollTop, (newValue, oldValue) => {
|
||||
console.log('scrollTop changed:', newValue);
|
||||
// 根据 scrollTop 的值计算导航栏透明度
|
||||
if (newValue > 0) {
|
||||
// 当 scrollTop 大于 0 时,透明度逐渐增加
|
||||
navOpacity.value = Math.min(1, newValue / 100);
|
||||
// 可以根据需要调整背景色
|
||||
// navBgColor.value = `rgba(255, 255, 255, ${navOpacity.value})`;
|
||||
} else {
|
||||
// 当 scrollTop 为 0 时,透明度为 1
|
||||
navOpacity.value = 0;
|
||||
// navBgColor.value = props.bgColor;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.iosLeftTitle {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #018AE0;
|
||||
}
|
||||
.nav-bar-title-xiaomi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.nav-bar-title-ios {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.iosBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 145px;
|
||||
height: 30px;
|
||||
background: #EEEEEE;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
color: #1A1A1A;
|
||||
width: 69px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
}
|
||||
.active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightImg_xiaomi{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<view class="footer" :class="['footer_'+type]">
|
||||
<view class="item" v-for="(item,index) in list" :key="index">
|
||||
<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer footerZhangwei" :class="['footer_'+type]">
|
||||
<view class="item" v-for="(item,index) in list" :key="index">
|
||||
<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs
|
||||
} from 'vue'
|
||||
|
||||
const topPopup = ref()
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'ios'
|
||||
},
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
statusBarHeight: 0,
|
||||
showTipLayer: true,
|
||||
list: [
|
||||
"个人收藏",
|
||||
"最近通话",
|
||||
"通讯录",
|
||||
"拨号键盘",
|
||||
"语音留言"
|
||||
]
|
||||
})
|
||||
|
||||
let {
|
||||
list,
|
||||
showTipLayer
|
||||
} = toRefs(data)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.type == 'xiaomi') {
|
||||
list.value = ["通话",
|
||||
"联系人",
|
||||
"营业厅"
|
||||
]
|
||||
}else if (props.type == 'oppo') {
|
||||
list.value = ["通话",
|
||||
"联系人",
|
||||
"营业厅"
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footerZhangwei{
|
||||
position: relative !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #f7f7f7;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 10px;
|
||||
color: #959597;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer_ios {
|
||||
padding-top: 2px;
|
||||
padding-bottom: constant(safe-area-inset-bottom) !important; // 兼容 IOS<11.2
|
||||
padding-bottom: env(safe-area-inset-bottom) !important; // 兼容 IOS>11.2
|
||||
.item:nth-child(2) {
|
||||
text {
|
||||
color: #007AFC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer_xiaomi ,.footer_oppo{
|
||||
padding-top: 7px;
|
||||
padding-bottom: 17px;
|
||||
background-color: #fff !important;
|
||||
.item {
|
||||
image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.item:nth-child(1) {
|
||||
text {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,63 +1,43 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 自定义头部导航栏 -->
|
||||
<ZdyNavbar :title="data.navbar.title"
|
||||
:bgColor="data.navbar.bgColor" :isBack="true" />
|
||||
<!-- 通话记录列表 -->
|
||||
<callList type="ios"></callList>
|
||||
<callList type="xiaomi"></callList>
|
||||
<callList type="oppo"></callList>
|
||||
<ZdyNavbar :type="data.type" :scrollTop="data.scrollTop"/>
|
||||
<ZdyHeader :type="data.type" />
|
||||
<callList :type="data.type"></callList>
|
||||
<tabbar :type="data.type" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 自定义头部
|
||||
import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
|
||||
import callList from "@/components/call-log/list/list.vue"
|
||||
import ZdyNavbar from "@/components/call-log/nav-bar/nav-bar.vue"
|
||||
import ZdyHeader from "@/components/call-log/header/header.vue"
|
||||
import callList from "@/components/call-log/list/list.vue"
|
||||
import tabbar from "@/components/call-log/tabbar/tabbar.vue"
|
||||
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onShow,
|
||||
onReady,
|
||||
onPullDownRefresh,
|
||||
onReachBottom
|
||||
} from "@dcloudio/uni-app";
|
||||
const {
|
||||
appContext,
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
const data = reactive({
|
||||
navbar: {
|
||||
title: "身份证",
|
||||
bgColor: '#EDEDED',
|
||||
},
|
||||
|
||||
import { ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
|
||||
import { onLoad, onShow, onReady, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
|
||||
const { appContext, proxy } = getCurrentInstance();
|
||||
const data = reactive({
|
||||
type: 'ios',
|
||||
scrollTop:0
|
||||
})
|
||||
|
||||
onLoad((option) => {
|
||||
|
||||
})
|
||||
onReady(() => {
|
||||
|
||||
onLoad((option) => {
|
||||
})
|
||||
onShow(() => {})
|
||||
onPageScroll((e) => {
|
||||
console.log(e)
|
||||
data.scrollTop=e.scrollTop
|
||||
|
||||
})
|
||||
onReady(() => {
|
||||
})
|
||||
onReachBottom(() => {
|
||||
|
||||
})
|
||||
onShow(() => { })
|
||||
onPullDownRefresh(() => {
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
})
|
||||
onReachBottom(() => {
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 381 B |
|
After Width: | Height: | Size: 583 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 949 B |
|
After Width: | Height: | Size: 982 B |
|
After Width: | Height: | Size: 1023 B |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 852 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 468 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 898 B |
|
After Width: | Height: | Size: 796 B |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 967 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 873 B |
|
After Width: | Height: | Size: 1.3 KiB |