123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723 |
- <!--内容:联系人详情界面,联系人名称、电话号码、通话记录。
- 更新内容:多个号码颜色头
- 更新人:張志宏
- 更新时间:2024/9/18
- -->
- <template>
- <view class="content">
- <!-- 上方固定栏,联系人姓名、颜色头、电话、 -->
- <view id="fixedContainer" class="fixed-container">
- <!-- 上方导航栏 -->
- <view class="navbar">
- <image @click="navigateToPage('index')" class="return-index" src="../../static/pics/return-left.png" mode=""></image>
- <p @click="navigateToPage('edit')" class="to-edit">编辑</p>
- </view>
- <!-- 联系人姓名 -->
- <view v-if="name!='null'" class="contact-person-name">
- <p>{{name}}</p>
- </view>
- <!-- 保存联系人一个号码的情况 -->
- <view v-if="count==1||count==2|| count==3 || count==4" class="contact-person-phonenumber">
- <view class="color-head1"></view>
- <p class="phone-number">
- {{formatPhoneNumber1}}
- </p>
- </view>
- <view class="sim-position">
- <p>{{location}}</p>
- </view>
-
- <!-- 保存联系人两个号码的情况 -->
- <view v-if="count==2 || count==3 || count==4" class="contact-person-phonenumber">
- <view class="color-head2"></view>
- <p class="phone-number">
- {{formatPhoneNumber2}}
- </p>
- </view>
- <view v-if="count==2 || count==3 || count==4" class="sim-position">
- <p>{{location}}</p>
- </view>
-
- <!-- 联系人3个号码情况 -->
- <view v-if="count==3 || count==4" class="contact-person-phonenumber">
- <view class="color-head3"></view>
- <p class="phone-number">
- {{formatPhoneNumber3}}
- </p>
- </view>
- <view v-if="count==3 || count==4" class="sim-position">
- <p>{{location}}</p>
- </view>
-
- <!-- 联系人4个号码情况 -->
- <view v-if="count==4" class="contact-person-phonenumber">
- <view class="color-head4"></view>
- <p class="phone-number">
- {{formatPhoneNumber4}}
- </p>
- </view>
- <view v-if="count==4" class="sim-position">
- <p>{{location}}</p>
- </view>
-
- <!-- 保存联系人多个号码的情况 -->
- <view v-if="count>4" v-for="(phone,index) in formatPhoneNumbers" :key="index" class="contact-person-phonenumbers">
- <p class="phone-number">
- {{phone}}
- </p>
- </view>
- <view v-if="count>4" class="sim-position">
- <p>{{location}}</p>
- </view>
-
- <!-- 分隔线 -->
- <view class="line"></view>
- </view>
- <!-- 通话记录 -->
- <view :style="{marginTop:containerHeight+'px'}" class="page-content">
-
- <view v-for="(log,index) in filterReadLogs " :key="index" class="contact-datials">
- <!-- <text>{{log.number}}</text> -->
- <view v-if="log.number==cleanPhoneNumber(phoneNumber1)" class="log-color-head1"></view>
- <view v-if="log.number==cleanPhoneNumber(phoneNumber2)" class="log-color-head2"></view>
- <view v-if="log.number==cleanPhoneNumber(phoneNumber3)" class="log-color-head3"></view>
- <view v-if="log.number==cleanPhoneNumber(phoneNumber4)" class="log-color-head4"></view>
- <view class="single-log" @click="CallPhone(log.number)">
- <view class="single-log-date">
- <p :style="{color:getLogDateColor(log.type)}">{{formatDate(log.date)}}</p>
- <!-- -->
- </view>
- <view class="single-log-type">
- <p :style="{color:getLogDateColor(log.type)}">{{getCallType(log.type)}}</p>
- <!-- 通话时间 -->
- <!-- <p v-if="log.duration!=0">{{formatSeconds(log.duration)}}</p> -->
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- // 存储 fixed-container 的高度
- containerHeight: 0 ,
- //联系人名称
- name:'',
- phones: [
- { number: '' } // 手机号数组,初始化一个空对象
- ],
- //联系人电话号码数量
- count:'',
- //带有间隔的电话号码
- formatPhoneNumber1:'',
- formatPhoneNumber2:'',
- formatPhoneNumber3:'',
- formatPhoneNumber4:'',
- formatPhoneNumbers:[],
- //传输的电话号码
- phoneNumber1:'',
- phoneNumber2:'',
- phoneNumber3:'',
- phoneNumber4:'',
- phoneNumbers:[],
- //通话记录
- telephoneLog:[],
- //筛选后的通话记录
- filterReadLogs:[],
- location:'浙江杭州'
- }
- },
- mounted(){
- this.requestPermissions();//请求权限
- this.handleGetCallLogs();//获取通话记录
- this.filtrCallLogs();//筛选通话记录
- this.updateContainerHeight();//获取fixed-container 的高度
- this.getCallType(this.callType);
- },
- methods: {
- //跳转页面
- navigateToPage(page){
- switch(page){
- case 'index':
- //返回到联系人页面
- uni.navigateBack({
- delta:1
- });
- break;
- case 'edit':
- uni.navigateTo({
- url: `/pages/edit/edit?name=${encodeURIComponent(this.name)}&phones=${encodeURIComponent(JSON.stringify(this.phones))}&count=${this.count}`
- });
- //导航到编辑页面
-
- break;
- default:
- break;
- }
- },
- // 拨打电话
- CallPhone(e) {
- // 调用HTML5 Plus框架提供的接口
- plus.device.dial(e, false);
- },
- //获取联系人信息页面高度
- updateContainerHeight() {
- this.$nextTick(()=>{
- const query=uni.createSelectorQuery().in(this);
- query.select('#fixedContainer').boundingClientRect(data=>{
- console.error(data.height);//获取view高度
- this.containerHeight=data.height;
- }).exec();
- });
- },
- //增加号码间隔
- formatPhoneNumber(phoneNumber){
- //將8位分割成4,4
- if(phoneNumber.length===8){
- return phoneNumber.replace(/(\d{4})(\d{4})/,'$1 $2');
- }else if (phoneNumber.length===12){
- return phoneNumber.replace(/(\d{4})(\d{4})(\d{4})/,'$1 $2 $3');
- }else if(phoneNumber.length===11){
- return phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/,'$1 $2 $3');
- }else{
- return phoneNumber;
- }
-
- },
- //申请权限
- requestPermissions() {
- if (plus.android && plus.android.runtimeMainActivity()) {
- const activity = plus.android.runtimeMainActivity();
- const ContextCompat = plus.android.importClass("androidx.core.content.ContextCompat");
- const ActivityCompat = plus.android.importClass("androidx.core.app.ActivityCompat");
- const PERMISSIONS = [plus.android.importClass("android.Manifest$permission").READ_CALL_LOG];
-
- if (PERMISSIONS.every(permission => ContextCompat.checkSelfPermission(activity, permission) === plus.android.importClass("android.content.pm.PackageManager").PERMISSION_GRANTED)) {
- console.log("权限已授予");
- } else {
- ActivityCompat.requestPermissions(activity, PERMISSIONS, 1);
- }
- }
- },
- //获取通话记录
- handleGetCallLogs() {
- if (plus.android) {
- try {
- const MainActivity = plus.android.runtimeMainActivity();
- const CallLogHelper = plus.android.importClass("com.example.mylibrary.CallLogHelper");
-
- if (CallLogHelper) {
- const logsJson = CallLogHelper.getCallLogs(MainActivity);
- console.log("Raw logsJson:", logsJson); // 打印原始数据
-
- const logsArray = JSON.parse(logsJson);
- console.log("Parsed logsArray:", logsArray); // 打印解析后的数据
-
- if (Array.isArray(logsArray)) {
- this.telephoneLog = logsArray;
- console.error("telephonelog",this.telephoneLog)
- } else {
- console.error("解析后的数据不是数组");
- }
- } else {
- console.error("CallLogHelper 类未加载");
- }
- } catch (e) {
- console.error("获取通话记录失败:", e);
- }
- } else {
- console.error("Android 环境未准备好");
- }
- },
- //去除电话号码中的空格
- cleanPhoneNumber(phoneNumber){
- const cleanedNumber = phoneNumber.replace(/[^\d+]/g, '');
- // console.error("清洁后的号码", cleanedNumber);
- return cleanedNumber;
- },
- filtrCallLogs(){
- // 去除待筛选的电话号码中的空格
- const cleanPhoneNumber1 = this.phoneNumber1.replace(/\s+/g, '');
- const cleanPhoneNumber2 = this.phoneNumber2 ? this.phoneNumber2.replace(/\s+/g, '') : null;
- const cleanPhoneNumber3 = this.phoneNumber2 ? this.phoneNumber3.replace(/\s+/g, '') : null;
- const cleanPhoneNumber4 = this.phoneNumber2 ? this.phoneNumber4.replace(/\s+/g, '') : null;
- console.log("多个未清洁号码",this.phoneNumbers)
- const cleanPhoneNumbers = this.phoneNumbers.map(num => num.replace(/\s+/g, ''));
- console.log("多个无间隔号码",cleanPhoneNumbers)
- console.log("当前的电话日志",this.telephoneLog)
- if(this.count==1){
- console.log("电话号码",cleanPhoneNumber1)
- this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1);
- console.log("筛选的通话记录",this.filterReadLogs);
- }else if(this.count==2){
- console.log("电话号码",cleanPhoneNumber2)
- this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1 ||log.number === cleanPhoneNumber2);
- console.log("筛选的通话记录",this.filterReadLogs);
- }else if(this.count==3){
- console.log("电话号码",cleanPhoneNumber3)
- this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1 ||log.number === cleanPhoneNumber2||log.number === cleanPhoneNumber3);
- console.log("筛选的通话记录",this.filterReadLogs);
- }else if(this.count==4){
- console.log("电话号码",cleanPhoneNumber4)
- this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1 ||log.number === cleanPhoneNumber2||log.number === cleanPhoneNumber3 || log.number === cleanPhoneNumber4);
- console.log("筛选的通话记录",this.filterReadLogs);
- }
- else{
- console.log("电话号码",cleanPhoneNumbers)
- this.filterReadLogs= this.telephoneLog.filter(log => cleanPhoneNumbers.includes(log.number));
- console.log("筛选的通话记录",this.filterReadLogs);
- }
- },
- // 根据通话类型的数值返回对应的中文字符串
- getCallType(type) {
-
- switch (type) {
- case 1:
- return '来电';
- case 2:
- return '拨出';
- case 3:
- return '未接';
- case 4:
- return '语音信箱';
- case 5:
- return '拒接';
- case 6:
- return '自动拒接';
- default:
- return '未知';
- }
- },
- getLogDateColor(callType){
- return callType==3 ? '#ff0000' : '#6E5E52'
- //未接返回红色,其他返回深驼灰色。
- },
- // 格式化日期为“年-月-日 时:分:秒”
- formatDate(timestamp) {
- const date = new Date(timestamp);
- const now=new Date();
- const Y = date.getFullYear() + '/';
- const M = (date.getMonth() + 1).toString() + '/';
- const D = date.getDate().toString()+' ';
- const h = date.getHours().toString()+ ':';
- const m = date.getMinutes().toString().padStart(2, '0');
-
- const currentYear=now.getFullYear()+'/';
- const currentMonth=(now.getMonth()+1).toString()+'/';
- const currentDay=now.getDate().toString()+' ';
- const yesterday=new Date(now);
- yesterday.setDate(now.getDate()-1);
- const yesterdayYear=now.getFullYear()+'/';
- const yesterdayMonth=(now.getMonth()+1).toString()+'/';
- const yesterdayDay=now.getDate().toString()+' ';
-
- if(Y==currentYear&&M==currentMonth&&D==currentDay)
- {
- return '今天'+h+m;
- }else if(Y==yesterdayYear&&M==yesterdayMonth&&D==yesterdayDay){
- return '昨天'+h+m;
- }else if(Y==currentYear){
- return M+D+h+m;
- }else{
- return Y+M+D
- }
- return Y + M + D + h + m ;
- },
- //格式化通话时间未“时分秒”
- formatSeconds(seconds) {
- // 计算小时
- const hours = Math.floor(seconds / 3600);
- // 计算分钟
- const minutes = Math.floor((seconds % 3600) / 60);
- // 计算剩余的秒数
- const secs = seconds % 60;
- let result = '';
- if (hours > 0) {
- result += `${hours}时`;
- }
- if (minutes > 0) {
- result += `${minutes}分`;
- }
- if (secs > 0 || result === '') { // 包含 0秒情况
- result += `${secs}秒`;
- }
- return result;
- }
- },
- //页面传输的联系人姓名、电话号码、号码数量
- onLoad(options){
- console.error('传输内容的格式',typeof options)
- console.error('传输的内容',options)
- this.name=decodeURIComponent(options.name) || '';
- this.count=options.count;
- const numbers=options.phoneNumbers ? JSON.parse(decodeURIComponent(options.phoneNumbers)):[];
- this.phonenumbers=numbers;
- console.error("测试号码",numbers)
- console.log('传输的电话号码',numbers)
- if(this.count==1){
- this.phones=numbers.map(num=>({number:num.value}));
- console.error('phones的结构',this.phones)
- this.phoneNumber1=numbers[0].value;
- console.log("phonenumber1",this.phoneNumber1)
- this.formatPhoneNumber1=this.formatPhoneNumber(this.phoneNumber1);
- console.log("phoneNumber",this.formatPhoneNumber1)
- }
- else if(this.count==2){
- this.phones=numbers.map(num=>({number:num.value}));
- console.error('phones的结构',this.phones)
- this.phoneNumber1=numbers[0].value;
- this.phoneNumber2=numbers[1].value;
- console.log("phonenumber1",this.phoneNumber1)
- console.log("phonenumber2",this.phoneNumber2)
- this.formatPhoneNumber1=this.formatPhoneNumber(this.phoneNumber1);
- this.formatPhoneNumber2=this.formatPhoneNumber(this.phoneNumber2);
- console.log("phoneNumber",this.formatPhoneNumber1)
- console.log("phoneNumber",this.formatPhoneNumber2)
- }else if(this.count==3){
- this.phones=numbers.map(num=>({number:num.value}));
- this.phoneNumber1=numbers[0].value;
- this.phoneNumber2=numbers[1].value;
- this.phoneNumber3=numbers[2].value;
- this.formatPhoneNumber1=this.formatPhoneNumber(this.phoneNumber1);
- this.formatPhoneNumber2=this.formatPhoneNumber(this.phoneNumber2);
- this.formatPhoneNumber3=this.formatPhoneNumber(this.phoneNumber3);
- console.log("formatPhoneNumber",this.formatPhoneNumber1)
- }else if(this.count==4){
- this.phones=numbers.map(num=>({number:num.value}));
- this.phoneNumber1=numbers[0].value;
- this.phoneNumber2=numbers[1].value;
- this.phoneNumber3=numbers[2].value;
- this.phoneNumber4=numbers[3].value;
- this.formatPhoneNumber1=this.formatPhoneNumber(this.phoneNumber1);
- this.formatPhoneNumber2=this.formatPhoneNumber(this.phoneNumber2);
- this.formatPhoneNumber3=this.formatPhoneNumber(this.phoneNumber3);
- this.formatPhoneNumber4=this.formatPhoneNumber(this.phoneNumber4);
- }else if(this.count>4){
- this.phones=numbers.map(num=>({number:num.value}));
- console.error('phones的结构',this.phones)
- console.error("多个号码",numbers)
- this.phoneNumbers=numbers.map(number=>number.value);
- console.error('这是未被筛选的电话',this.phoneNumbers)
- this.formatPhoneNumbers=numbers.map(number=>this.formatPhoneNumber(number.value));
- console.error("解析后增加间隔的号码",this.formatPhoneNumbers)
-
- }
-
- },
- }
- </script>
- <style>
- .content{
- /*子元素垂直排列*/
- display: flex;
- flex-direction: column;
- padding: 20rpx;
- width: 100vw;
- height: 100vh;
- background-color: #f5f5f5;
- }
- .navbar{
- display: flex;
- justify-content: space-between;
- margin-top: 10%;
- /* background-color: antiquewhite; */
- }
- .return-index{
- width: 90rpx;
- height: 90rpx;
- margin-left: 2%;
- }
- .to-edit{
- font-size: 60rpx;
- margin-right: 6%;
- color: #4286F3;
- }
- .fixed-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- background-color: #f5f5f5;
- z-index: 1000; /* 确保它位于其他内容之上 */
- padding: 10rpx; /* 可以根据需要调整 */
- padding-top: 5rpx;
- padding-bottom: 0rpx;
-
- }
- .page-content{
- width: 100vw;
- background-color: #f5f5f5;
- }
- .contact-person-name {
- display: flex;
- align-items: center;
- font-size: 10vw;
- font-weight: 300;
- letter-spacing: 4rpx;
- line-height: 1.6;
- margin-bottom: 10rpx;
- margin-left: 10%;
- margin-right: 10%;
- text-align: center; /* 文本居中 */
- }
- .contact-person-phonenumber{
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 60rpx;
- margin-top: 10rpx;
- margin-left: 5rpx;
- margin-bottom: 5rpx;
- font-size: 40rpx;
- font-weight: 120;
- color: rgba(0, 0, 0, 1.0);
-
- }
- /* 多个号码的样式 */
- .contact-person-phonenumbers{
- position: relative;
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- height: 60rpx;
- margin-left: 65rpx;
- margin-right: 80rpx;
- margin-top: 10rpx;
- margin-bottom: 5rpx;
- font-size: 40rpx;
- font-weight: 120;
- color: rgba(0, 0, 0, 1.0);
-
-
- }
- .phone-number{
- margin-left: 35rpx;
- font-size: 55rpx;
- font-weight: 400;
- }
- .phone-number span{
- display: inline-block;
- }
- .phone-number .gap{
- display: inline-block;
- width: 20rpx;
- }
- .sim-position{
- display: flex;
- align-items: center;
- justify-content: flex-end;
- font-size: 35rpx;
- font-weight: 280;
- right: 35%;
- margin-left: 20rpx;
- margin-right: 120rpx;
- margin-top: 5rpx;
- margin-bottom: 5rpx;
- height: 40rpx;
- color: rgba(182, 182, 182, 0.9);
- }
- .color-head1{
- position: absolute;
- width: 19rpx;
- height: 100%;
- background-color: #4286F3;
- /*google蓝*/
- /* background-color: rgb(52, 168, 83); */
- /*google绿*/
- /* background-color: #4286F3; */
-
- /* background-color: #1c3eff; */
- left: 20%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:8rpx 8rpx 8rpx 8rpx;
- }
- .color-head2{
- position: absolute;
- width: 19rpx;
- height: 100%;
- background-color: rgb(255, 183, 0);
- /* background-color: #FAC230; */
- /*google黄*/
- /* background-color: rgb(234, 67, 53); */
- /*google红*/
- /* background-color: #04f03b; */
- left: 20%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:8rpx 8rpx 8rpx 8rpx;
- }
- .color-head3{
- position: absolute;
- width: 19rpx;
- height: 100%;
- background-color: #04f03b;
- left: 20%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:8rpx 8rpx 8rpx 8rpx;
- }
- .color-head4{
- position: absolute;
- width: 19rpx;
- height: 100%;
- background-color: rgb(234, 67, 53);
- left: 20%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:8rpx 8rpx 8rpx 8rpx;
- }
- .line{
- /*分隔线,位于较高层、宽度、height参数为分隔线的粗细、颜色、上下间隔*/
- z-index: 1;
- position: relative;
- width: 95%;
- height: 2rpx;
- background-color: #dbdbdb;
- margin-left: 10rpx;
- margin-right: 5rpx;
- margin-top: 20rpx;
- margin-bottom: 0rpx;
- /* padding-bottom: 3rpx; */
- box-shadow: 0 2rpx 3rpx rgba(224, 224, 224, 0.2);
- }
- .contact-datials{
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- z-index: 0;
- flex-flow: row;
- position: relative;
- width: 90%;
- margin-top: 5rpx;
- margin-bottom: 15rpx;
- margin-left: 20rpx;
- margin-right: 30rpx;
- /* padding-bottom: 5rpx; */
- height: 150rpx;
- border: 0.5rpx;
- border-radius: 10rpx;
- background-color: #ffffff;
- }
- .log-color-head1{
-
- width: 30rpx;
- height: 150rpx;
- background-color: #4286F3;
- /* background-color: rgba(66, 153, 244); */
- /*google蓝*/
- /* background-color: rgb(52,168,83); */
- /* background-color: #55AF7B; */
- /*google绿*/
- /* background-color: #2A20FF;/*蓝紫色偏蓝*/
- /* background-color: #1c3eff; */
- left: 0%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:12rpx 12rpx 12rpx 12rpx;
- }
- .log-color-head2{
-
- width: 30rpx;
- height: 150rpx;
- background-color: rgb(255, 183, 0);
- /* background-color: #FAC230; */
- /*google黄*/
- /* background-color: rgb(234, 67, 53); */
- /* background-color: #E84537; */
- /*google红*/
- /* background-color: #04f03b; */
- left: 0%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:12rpx 12rpx 12rpx 12rpx;
- }
- .log-color-head3{
-
- width: 30rpx;
- height: 150rpx;
- background-color: #04f03b;
- /* background-color: #FAC230; */
- /*google黄*/
- /* background-color: rgb(234, 67, 53); */
- /* background-color: #E84537; */
- /*google红*/
- /* background-color: #04f03b; */
- left: 0%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:12rpx 12rpx 12rpx 12rpx;
- }
- .log-color-head4{
-
- width: 30rpx;
- height: 150rpx;
- background-color: rgb(234, 67, 53);
- /* background-color: #FAC230; */
- /*google黄*/
- /* background-color: rgb(234, 67, 53); */
- /* background-color: #E84537; */
- /*google红*/
- /* background-color: #04f03b; */
- left: 0%;
- margin-left: 20rpx;
- margin-right: 5rpx;
- margin-left: 0%;
- border-radius:12rpx 12rpx 12rpx 12rpx;
- }
- .single-log{
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 92%;
- font-size: 50rpx;
- }
- .single-log-date{
- margin-left: 3%;
- font-size: 70rpx;
- color: #9c9c9c;
- }
- .single-log-type{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-right: 5%;
- }
- </style>
|