<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css" />
<script>
resize();
window.onresize = function () {
resize();
}
function resize(tt) {
var docEl = document.documentElement;
var clientWidth = window.innerWidth;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
}
</script>
</head>
<style>
[v-cloak] {
display: none;
}
* {
margin: 0;
padding: 0;
}
/*清除浮动*/
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
.app_cont {
padding: 0.1rem 0.3rem;
font-size: 0.32rem;
}
.app-head {
width: 100%;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.app_head li {
display: block;
border-bottom: 1px solid #E5E5E5;
padding: 0.2rem 0;
}
.app_head {
z-index: 2;
}
.head_top img {
display: block;
float: left;
width: 2.1rem;
height: 2.1rem;
}
.head_top .head_txt {
float: left;
width: 4.8rem;
height: 2.1rem;
font-size: 0.32rem;
}
.head_top .head_txt p {
display: block;
height: 0.7rem;
line-height: 0.7rem;
font-size: 0;
padding: 0 0.1rem;
}
.head_top .head_txt p span {
display: inline-block;
font-size: 0.32rem;
}
.head_top .head_txt p .txt_tit {
width: 30%;
font-family: PingFangSC-Regular;
font-size: 0.34rem;
color: #333;
letter-spacing: 0.0028rem;
text-align: left;
font-weight: 400;
}
.head_top .head_txt p .txt_info {
width: 70%;
text-align: right;
font-family: PingFangSC-Regular;
font-size: 0.32rem;
color: #979797;
letter-spacing: 0.0027rem;
}
.app_head ul .head_list {
width: 100%;
height: 0.88rem;
box-sizing: border-box;
font-size: 0;
line-height: 0.68rem;
}
.app_head ul .head_list .list_tit {
display: inline-block;
width: 30%;
font-family: PingFangSC-Regular;
font-size: 0.32rem;
color: #333;
letter-spacing: 0;
line-height: 0.32rem;
text-align: left;
}
.app_head ul .head_list .list_info {
display: inline-block;
width: 70%;
font-family: PingFangSC-Regular;
font-size: 0.32rem;
color: #9B9B9B;
letter-spacing: 0;
text-align: right;
line-height: 0.32rem;
}
/* 收起展示信息 */
.show_hide_info {
width: 100%;
height: 0.82rem;
line-height: 0.82rem;
text-align: center;
font-family: PingFangSC-Regular;
font-size: 0.3rem;
color: #3098F2;
letter-spacing: 0;
}
.show_hide_info img {
display: inline-block;
width: 0.3rem;
height: 0.3rem;
vertical-align: middle;
}
/* 出险记录 */
.body_cxjl {
width: 100%;
}
/* 出险记录 */
.cxjl_show_hide {
width: 100%;
height: 0.88rem;
line-height: 0.88rem;
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333;
letter-spacing: 0;
}
.cxjl_show_hide img {
display: block;
width: 0.28rem;
height: 0.17rem;
float: right;
margin-top: 0.3rem;
}
.cxjl_tit {
display: block;
}
.cxjl_tit li {
width: 100%;
line-height: 0.88rem;
border-top: 1px solid #E5E5E5;
color: #556169;
}
.cxjl_tit .Otitle {
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #000000;
letter-spacing: 0;
}
.tit_list .tit_date>span {
display: inline-block;
}
.tit_list li.tit_date>span:first-child {
width: 40%;
text-align: left;
color: #2C3236;
line-height: 0.88rem;
}
.tit_list li.tit_date>span:last-child {
width: 60%;
text-align: right;
color: #979797;
}
.tit_list li>span {
display: inline-block;
}
.tit_list li>span:first-child {
/* width: 24%; */
vertical-align: top;
line-height: .45rem;
}
.tit_list li>span:last-child {
width: 76%;
line-height: 0.45rem;
}
.tit_list li.tit_info {
padding: 0.15rem 0 0;
}
.borderTop {
border-top: 1px solid #E5E5E5;
}
/* 维保 */
.weibao .wb_sign {
display: inline-block;
background: #F0F8FF;
border-radius: 6px;
font-family: PingFangSC-Regular;
font-size: 0.24rem;
color: #5094F3;
letter-spacing: 0;
line-height: 0.28rem;
padding: 0.05rem;
margin-left: 0.05rem;
}
.weibao .cxjl_tit .weib>span {
display: inline-block;
}
.weibao .cxjl_tit .weib>span:first-of-type {
width: 50%;
}
.weibao .cxjl_tit .weib>span:last-of-type {
width: 50%;
text-align: right;
}
.total_data {
width: 100%;
display: flex;
justify-content: space-between;
border-top: 1px solid #E5E5E5;
padding: 0.3rem 0;
}
.total_data>div {
width: 2.1rem;
height: 1.6rem;
border-radius: 8px;
text-align: center;
padding: 0.2rem 0;
box-sizing: border-box;
}
.total_data>div>p {
height: 0.6rem;
line-height: 0.6rem;
}
.total_data>div>p:first-child {
font-weight: bold;
font-size: 0.48rem;
}
.total_data>div>p:last-child {
font-size: 0.32rem;
}
.total_data_1 {
background: rgba(230, 247, 255, 1);
color: rgba(80, 148, 243, 1);
}
.total_data_2 {
background: rgba(255, 247, 235, 1);
color: rgba(254, 156, 72, 1);
}
.total_data_3 {
background: rgba(227, 252, 240, 1);
color: rgba(12, 189, 132, 1);
}
.data_des {
width: 100%;
}
.data_des_list {
width: 100%;
/* background: red; */
}
.des_list_li1 {
font-size: 0;
color: #333;
padding: 0.15rem 0;
}
.des_list_li1>span {
display: inline-block;
width: 33.333333%;
text-align: center;
font-size: 0.32rem;
}
.des_list_li1>span:first-of-type {
text-align: left;
}
.des_list_li1>span:first-of-type {
text-align: left;
}
.des_list_li1>span:last-of-type {
text-align: right;
}
.des_list_li2 {
display: flex;
flex-wrap: nowrap;
padding: 0.1rem;
}
.des_listt {
background: #f3f4f5;
border-radius: 5px;
padding: 0.1rem;
box-sizing: border-box;
}
.des_list_li2>span {
display: inline-block;
}
.des_list_li2>span:first-of-type {
width: 24%;
font-size: 0.28rem;
font-family: PingFang-SC-Medium;
}
.des_list_li2>span:last-of-type {
font-size: 0.28rem;
font-family: PingFang-SC-Medium;
color: #888;
}
/* 照片 */
.pictures {
width: 100%;
}
.pic_list {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.pic_box {
width: 2.84rem;
height: 2.2rem;
margin-bottom: 0.3rem;
position: relative;
}
.pic_box img {
width: 2.84rem;
height: 2.2rem;
}
.over_title{
display: block;
width: 2.84rem;
height: 0.6rem;
line-height: 0.6rem;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
color: #fff;
background: rgba(136,136,136,.6);
}
.video_list{
width: 6.9rem;
height: 2.8rem;
margin: 0.2rem 0;
position: relative;
background: #E5E5E5;
}
.video_list video{
width:100%;
height:100%;
object-fit:contain;
}
.play_pause{
width: 0.93rem;
height: 0.93rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-70%)
}
.play_pause img{
width: 100%;
height: 100%;
}
.video_title{
width: 100%;
height: 0.77rem;
line-height: 0.77rem;
text-align: center;
background: rgba(0,0,0,0.60);
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
font-family: PingFangSC-Regular;
font-size: 0.32rem;
color: #FFFFFF;
letter-spacing: 0.0028rem;
}
</style>
<body>
<div id="app" v-cloak>
<div class="app_cont">
<div class="app_head">
<ul>
<li class="head_top clearfix">
<img src="./imgs/topimg.png" alt="车辆图片">
<div class="head_txt">
<p><span class="txt_tit">车牌号</span><span class="txt_info">粤A66666</span></p>
<p><span class="txt_tit">车架号</span><span class="txt_info">LFGH67K3799T94671</span></p>
<p class="vtop"><span class="txt_tit">发动机号</span><span class="txt_info">126F83899</span></p>
</div>
</li>
<transition-group name="fade">
<template v-if="head_show_hide">
<li class="head_list" v-bind:key="0"><span class="list_tit">品牌型号</span><span class="list_info">别克牌SGM716LEAT</span></li>
<li class="head_list" v-bind:key="1"><span class="list_tit">车辆类型</span><span class="list_info">别克牌SGM716LEAT</span></li>
<li class="head_list" v-bind:key="2"><span class="list_tit">所有人</span><span class="list_info">别克牌SGM716LEAT</span></li>
<li class="head_list" v-bind:key="3"><span class="list_tit">使用性质</span><span class="list_info">别克牌SGM716LEAT</span></li>
<li class="head_list" v-bind:key="4"><span class="list_tit">注册时间</span><span class="list_info">别克牌SGM716LEAT</span></li>
</template>
</transition-group>
</ul>
</div>
<div class="show_hide_info" @click="()=>this.head_show_hide = !this.head_show_hide">
<span v-if="head_show_hide">收起信息</span>
<span v-else>展开信息</span>
<img src="./imgs/up.png" alt="展开信息" v-if="head_show_hide">
<img src="./imgs/down.png" alt="展开信息" v-else>
</div>
<div class="app_body">
<!-- 出险记录 begin-->
<div class="body_cxjl">
<hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
<div class="cxjl_show_hide clearfix" @click="()=>this.cxjl_show_hide=!this.cxjl_show_hide">
出险记录
<img src="./imgs/upp.png" v-if="cxjl_show_hide">
<img src="./imgs/dow.png" v-else>
</div>
<transition name="fade">
<div v-if="cxjl_show_hide">
<ul class="cxjl_tit">
<li class="Otitle">出险总览</li>
<li>理赔总次数:2次</li>
<li>理赔总金额:10000元</li>
<li>维修总金额:10000元</li>
<li>换件总金额:10000元</li>
</ul>
<hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
<div class="cxjl_show_hide">
出险记录
</div>
<ul class="cxjl_tit tit_list">
<li class="tit_date"><span>2018-9-9</span><span>理赔金额:500元</span></li>
<li class="tit_info"><span>事故描述:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>维修内容:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>换件信息:</span><span>{{info_some}}</span></li>
</ul>
<ul class="cxjl_tit tit_list">
<li class="tit_date"><span>2018-9-9</span><span>理赔金额:500元</span></li>
<li class="tit_info"><span>事故描述:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>维修内容:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>换件信息:</span><span>{{info_some}}</span></li>
</ul>
<ul class="cxjl_tit tit_list">
<li class="tit_date"><span>2018-9-9</span><span>理赔金额:500元</span></li>
<li class="tit_info"><span>事故描述:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>维修内容:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>换件信息:</span><span>{{info_some}}</span></li>
</ul>
<transition name="fade">
<template v-if="cxjl_info_off">
<ul class="cxjl_tit tit_list">
<li class="tit_date"><span>2018-9-9</span><span>理赔金额:500元</span></li>
<li class="tit_info"><span>事故描述:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>维修内容:</span><span>{{info_some}}</span></li>
<li class="tit_info"><span>换件信息:</span><span>{{info_some}}</span></li>
</ul>
</template>
</transition>
<div class="show_hide_info borderTop" @click="()=>this.cxjl_info_off=!this.cxjl_info_off">
<span v-if="cxjl_info_off">收起信息</span>
<span v-else>显示全部</span>
<img src="./imgs/up.png" v-if="cxjl_info_off">
<img src="./imgs/down.png" v-else>
</div>
</div>
</transition>
</div>
<!-- 出险记录 end -->
<!-- 维保记录 begin-->
<div class="body_cxjl weibao">
<hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
<div class="cxjl_show_hide clearfix" @click="()=>this.weibao_all_off=!this.weibao_all_off">
维保记录
<img src="./imgs/upp.png" v-if="weibao_all_off">
<img src="./imgs/dow.png" v-else>
</div>
<transition name="fade">
<div v-if="weibao_all_off">
<ul class="cxjl_tit">
<li class="Otitle">维保总览</li>
<li>总公里数<span class="wb_sign">公里数正常</span></li>
<li class="weib"><span>最后一次维保</span><span>2017-07-07</span></li>
<li class="weib"><span>重要组成部件维修</span><span>否</span></li>
<li class="weib"><span>结构件维修</span><span>否</span></li>
<li class="weib"><span>外观覆盖件维修</span><span>否</span></li>
</ul>
<div class="cxjl_show_hide" style="border-top:0.2rem solid #E5E5E5;">
维保总览
</div>
<div class="total_data">
<div class="total_data_1">
<p>11</p>
<p>总次数</p>
</div>
<div class="total_data_2">
<p>11</p>
<p>总次数</p>
</div>
<div class="total_data_3">
<p>11</p>
<p>总次数</p>
</div>
</div>
<div class="data_des">
<!-- 维保list begin-->
<div class="data_des_list">
<div class="des_list_li1">
<span>2018-08-07</span>
<span>2300公里</span>
<span>保养</span>
</div>
<div class="des_listt">
<div class="des_list_li2">
<span>内容:</span>
<span>{{info_some}}</span>
</div>
<div class="des_list_li2">
<span>材料:</span>
<span>{{info_some}}</span>
</div>
</div>
</div>
<div class="data_des_list">
<div class="des_list_li1">
<span>2018-08-07</span>
<span>2300公里</span>
<span>保养</span>
</div>
<div class="des_listt">
<div class="des_list_li2">
<span>内容:</span>
<span>{{info_some}}</span>
</div>
<div class="des_list_li2">
<span>材料:</span>
<span>{{info_some}}</span>
</div>
</div>
</div>
<div class="data_des_list">
<div class="des_list_li1">
<span>2018-08-07</span>
<span>2300公里</span>
<span>保养</span>
</div>
<div class="des_listt">
<div class="des_list_li2">
<span>内容:</span>
<span>{{info_some}}</span>
</div>
<div class="des_list_li2">
<span>材料:</span>
<span>{{info_some}}</span>
</div>
</div>
</div>
<!-- 维保list end-->
<transition name="fade">
<template v-if="weibao_des_off">
<div class="data_des_list">
<div class="des_list_li1">
<span>2018-08-07</span>
<span>2300公里</span>
<span>保养</span>
</div>
<div class="des_listt">
<div class="des_list_li2">
<span>内容:</span>
<span>{{info_some}}</span>
</div>
<div class="des_list_li2">
<span>材料:</span>
<span>{{info_some}}</span>
</div>
</div>
</div>
</template>
</transition>
</div>
<div class="show_hide_info borderTop" @click="()=>this.weibao_des_off=!this.weibao_des_off">
<span v-if="weibao_des_off">收起信息</span>
<span v-else>显示全部</span>
<img src="./imgs/up.png" v-if="weibao_des_off">
<img src="./imgs/down.png" v-else>
</div>
</div>
</transition>
</div>
<!-- 维保记录 end-->
<!-- 车辆照片 begin -->
<div class="pictures">
<hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
<div class="cxjl_show_hide clearfix" @click="()=>this.pic_off=!this.pic_off">
车辆照片
<img src="./imgs/upp.png" v-if="pic_off">
<img src="./imgs/dow.png" v-else>
</div>
<transition name="fade">
<div v-show="pic_off">
<div class="pic_list">
<div class="pic_box">
<img src="./imgs/pic45.png" alt="">
<p class="over_title">左前45</p>
</div>
<div class="pic_box">
<img src="./imgs/pic45.png" alt="">
<p class="over_title">左前45</p>
</div>
<div class="pic_box">
<img src="./imgs/pic45.png" alt="">
<p class="over_title">左前45</p>
</div>
<div class="pic_box">
<img src="./imgs/pic45.png" alt="">
<p class="over_title">左前45</p>
</div>
<div class="pic_box">
<img src="./imgs/pic45.png" alt="">
<p class="over_title">左前45</p>
</div>
<div class="pic_box">
<img src="./imgs/pic45.png" alt="">
<p class="over_title">左前45</p>
</div>
</div>
<div class="video_list" @click.stop="playVideo(index)" v-for="(item,index) in videoList">
<video :id="'video'+index" :poster="item.posterItem" @play="playItem(index)" @pause="stopPause(index)">
<source :src="item.url" type="video/mp4">
</video>
<div class="play_pause" v-show='item.playOff'><img src="imgs/play.png" alt="播放/暂停"></div>
<div class="video_title" v-show='item.playOff'>{{item.title}}</div>
</div>
</div>
</transition>
<hr style='width:7.5rem;margin-left:-0.3rem;background-color:#E5E5E5;height:1px;border:none;'>
</div>
<!-- 车辆照片 end -->
</div>
</div>
</div>
<script>
var App = new Vue({
el: '#app',
data: {
head_show_hide: false,
cxjl_show_hide: false,
cxjl_info_off: false, //出险记录的详细信息显示
//维保
weibao_all_off: false,
weibao_des_off: false,
//照片
pic_off: false,
playIcon_off: true,
//视频data
videoList: [
{
title: '绕车视频',
url: 'ckin.mp4',
posterItem: 'imgs/ckin.jpg',
playOff: true,
},
{
title: '内部视频',
url: 'ckin.mp4',
posterItem: 'imgs/timg.jpg',
playOff: true,
},
{
title: '发动机视频',
url: 'ckin.mp4',
posterItem: 'imgs/ckin.jpg',
playOff: true,
},
{
title: '内饰视频',
url: 'ckin.mp4',
posterItem: 'imgs/timg-1.jpg',
playOff: true,
},
],
info_some: '占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符',
},
watch: {
cxjl_show_hide(val, oval) {
console.log(val)
if (!val) {
this.cxjl_info_off = false;
}
},
weibao_all_off(val, oval) {
if (!val) {
this.weibao_des_off = false;
}
}
},
methods: {
playVideo(index) {
let vdIndex = 'video' + index;
var myVideo = document.getElementById(vdIndex);
if (myVideo.paused) {
let tagVd = document.getElementsByTagName('video');
for (let i = 0; i < tagVd.length; i++) {
tagVd[i].pause();
}
myVideo.play();
this.videoList[index].playOff = false;
myVideo.controls = true;
} else {
let tagVd = document.getElementsByTagName('video');
for (let i = 0; i < tagVd.length; i++) {
tagVd[i].pause();
}
myVideo.pause();
// myVideo.controls = false;
}
},
playItem(index) {
console.log(index)
let tagVd = document.getElementsByTagName('video');
for (let i = 0; i < tagVd.length; i++) {
if(i!=index){
tagVd[i].pause();
}
}
},
stopPause(index) {
console.log("stop"+index)
}
}
})
</script>
</body>
</html>