|
|
|
@@ -0,0 +1,747 @@ |
|
|
|
<template> |
|
|
|
<view class="inspectionCenter"> |
|
|
|
<view v-show="showVideo" class="poupBox"> |
|
|
|
<view class="videoHeader"> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="contentBox"> |
|
|
|
<view class="closeBox"> |
|
|
|
<view class="title"> |
|
|
|
{{sensorName+'(' + sensorId + ')'}} |
|
|
|
</view> |
|
|
|
<view class="closes" @click="closeDialog"> |
|
|
|
<u-icon name="close-circle-fill" color="#ccc" size="22"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="botbox"> |
|
|
|
<view id="url-player-test"></view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="bottom-content"> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="searchBox"> |
|
|
|
<view class="searchLine"> |
|
|
|
<view class="searchLabels" @click="showTree"> |
|
|
|
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/group.png" mode=""> |
|
|
|
</image> |
|
|
|
<image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode=""> |
|
|
|
</image> |
|
|
|
<text class="labels">选择分组</text> |
|
|
|
<view class="values">{{this.searchForm.groupName}}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrow"> |
|
|
|
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode=""> |
|
|
|
</image> |
|
|
|
<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch"> |
|
|
|
<view class="content" @click.stop="isSelect"> |
|
|
|
<u-row justify="space-between" gutter="10"> |
|
|
|
<u-col span="7"> |
|
|
|
<view class="demo-layout"> |
|
|
|
<view class="left-layout"> |
|
|
|
<text>{{'警告类型'}}</text> |
|
|
|
</view> |
|
|
|
<view class="right-layout"> |
|
|
|
<image style="width: 30rpx;height:30rpx;" |
|
|
|
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-col> |
|
|
|
<u-col span="5"> |
|
|
|
<view class="demo-layout" @click="toOpenSelect"> |
|
|
|
<view class="left-layout"> |
|
|
|
<text>{{'处理状态'}}</text> |
|
|
|
</view> |
|
|
|
<view class="right-layout"> |
|
|
|
<image style="width: 30rpx;height:30rpx;" |
|
|
|
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-col> |
|
|
|
</u-row> |
|
|
|
|
|
|
|
<view class="btnBox"> |
|
|
|
<view class="leftBtn" @click="clearform"> |
|
|
|
重置 |
|
|
|
</view> |
|
|
|
<view class="rightBtn" @click="onsubmit"> |
|
|
|
确认 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="tableBox"> |
|
|
|
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty> |
|
|
|
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> |
|
|
|
<u-list-item v-for="(item, index) in monitorList" :key="index"> |
|
|
|
<view class="liBox"> |
|
|
|
<view class="topCard"> |
|
|
|
<view class="pic"> |
|
|
|
<image :src="item.snapshotUrl" mode="aspectFill"></image> |
|
|
|
<view class="resolvingPower"> |
|
|
|
{{item.resWidth}}*{{item.resHeight}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="rightCard"> |
|
|
|
<view class="firstCard"> |
|
|
|
<view class="schoolName"> |
|
|
|
摄像头ID：{{item.sensorId}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="secondCard"> |
|
|
|
|
|
|
|
<view class="txt"> |
|
|
|
摄像头名称：{{item.sensorName}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="thirdCard"> |
|
|
|
|
|
|
|
<view class="txt"> |
|
|
|
设备IP：{{item.directUrlIp}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="btoCard"> |
|
|
|
<view class="leftBox btoBox"> |
|
|
|
<image src="@/static/image/earlyWarning/school.png" mode=""></image> |
|
|
|
<view class="txt"> |
|
|
|
所属学校：演示学校 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="rightBox btoBox" @click="startClick(item.sensorId,item.sensorName)"> |
|
|
|
<view class="txt"> |
|
|
|
播放 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-list-item> |
|
|
|
<u-loadmore :status="status" /> |
|
|
|
</u-list> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <web-view :webview-styles="styles" src="/hybrid/html/players.html"></web-view> --> |
|
|
|
<!-- <u-modal :show="showVideo" :title="videoTitle" :closeOnClickOverlay="false" :showCancelButton="true" |
|
|
|
@confirm="confirmVideo" @cancel="cancelVideo"> |
|
|
|
<view class="slot-content"> |
|
|
|
<cover-view style="width: 100%;height:500px"> |
|
|
|
|
|
|
|
</cover-view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</u-modal> --> |
|
|
|
<tki-tree ref="tkitree" title="摄像头分组" :showChild="showChild" :selectParent="selectParent" :multiple="multiple" |
|
|
|
:range="treelist" :foldAll="flod" rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import tkiTree from '@/components/tki-tree/tki-tree.vue'; |
|
|
|
import { |
|
|
|
groupList, //获取摄像头分组 |
|
|
|
list, //获取摄像头列表 |
|
|
|
startUrl, //说去视频地址 |
|
|
|
stopUrl //停止视频流获取 |
|
|
|
} from '@/api/monitor/index.js' |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
tkiTree |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
styles: { |
|
|
|
width: '100%', |
|
|
|
height: '100%', |
|
|
|
zIndex: '999999999999999999999999999' |
|
|
|
// bottom: '56px' |
|
|
|
}, |
|
|
|
showVideo: false, |
|
|
|
videoTitle: '', |
|
|
|
isShowSearch: false, |
|
|
|
searchForm: { |
|
|
|
groupName: '全部', |
|
|
|
groupId: '', |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10 |
|
|
|
}, |
|
|
|
monitorList: [], |
|
|
|
isLoading: false, |
|
|
|
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 |
|
|
|
treelist: [], |
|
|
|
multiple: false, //是否多选 |
|
|
|
selectParent: true, //父级可选择 |
|
|
|
flod: false, //折叠 |
|
|
|
showChild: true, |
|
|
|
player: null, |
|
|
|
sensorId: '', |
|
|
|
sensorName: '', |
|
|
|
videoUrl: '', |
|
|
|
streamId: '', |
|
|
|
videoToken: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.getGroupList() |
|
|
|
// 获取列表数据 |
|
|
|
this.loadmore() |
|
|
|
}, |
|
|
|
onUnload() { |
|
|
|
if(this.showVideo) { |
|
|
|
this.closeDialog() |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
onPullDownRefresh() { |
|
|
|
uni.stopPullDownRefresh() |
|
|
|
this.status = 'loadmore' |
|
|
|
this.searchForm.pageNum = 1; |
|
|
|
this.monitorList = [] |
|
|
|
this.loadmore() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
setVideo() { |
|
|
|
let that = this; |
|
|
|
this.loadWebPlayerSDK().then(() => { |
|
|
|
// 如果需要使用自定义组件，打开以下注释 |
|
|
|
// this.loadComponent().then(() => { |
|
|
|
this.player = new Aliplayer({ |
|
|
|
id: "url-player-test", |
|
|
|
source: this.videoUrl + "&subaudio=no&jitterbuffer=6000", |
|
|
|
width: "100%", |
|
|
|
height: "100%", |
|
|
|
isLive: true, |
|
|
|
rtsFallback: true, |
|
|
|
rtsFallbackType: 'HLS', |
|
|
|
}, function(player) { |
|
|
|
player.mute() |
|
|
|
}); |
|
|
|
|
|
|
|
this.player.one('canplay', function() { |
|
|
|
// console.log('canplay', this.player.tag); |
|
|
|
that.player.tag.play(); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// }).catch((e) => { console.log("加载组件失败", e) }) |
|
|
|
}).catch((e) => { |
|
|
|
console.log("加载播放器SDK失败", e); |
|
|
|
}); |
|
|
|
}, |
|
|
|
closeDialog() { |
|
|
|
if (this.player) { |
|
|
|
this.player.dispose(); |
|
|
|
} |
|
|
|
|
|
|
|
this.showVideo = false; |
|
|
|
let params = { |
|
|
|
sensorId: this.sensorId, |
|
|
|
streamId: this.streamId, |
|
|
|
videoToken: this.videoToken |
|
|
|
}; |
|
|
|
stopUrl(params).then(res => { |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
loadWebPlayerSDK() { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
const s_tag = document.createElement('script'); // 引入播放器js |
|
|
|
s_tag.type = 'text/javascript'; |
|
|
|
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js' |
|
|
|
|
|
|
|
// s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js'; |
|
|
|
s_tag.charset = 'utf-8'; |
|
|
|
s_tag.onload = () => { |
|
|
|
resolve(); |
|
|
|
} |
|
|
|
document.body.appendChild(s_tag); |
|
|
|
const l_tag = document.createElement('link'); // 引入播放器css |
|
|
|
l_tag.rel = 'stylesheet'; |
|
|
|
l_tag.href = |
|
|
|
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css' |
|
|
|
// 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css'; |
|
|
|
document.body.appendChild(l_tag); |
|
|
|
}); |
|
|
|
}, |
|
|
|
loadComponent() { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
const s_tag = document.createElement('script'); |
|
|
|
s_tag.type = 'text/javascript'; |
|
|
|
// 需要先下载组件 js 文件，放到项目 /static/ 目录下 |
|
|
|
// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js |
|
|
|
s_tag.src = './static/aliplayercomponents-1.0.9.min.js'; |
|
|
|
s_tag.charset = 'utf-8'; |
|
|
|
s_tag.onload = () => { |
|
|
|
resolve(); |
|
|
|
} |
|
|
|
document.body.appendChild(s_tag); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
addAttribute(data) { // tree结构递归添加属性 |
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
data[i].isShow = false |
|
|
|
data[i].name = data[i].title |
|
|
|
if (data[i].children && data[i].children.length > 0) { |
|
|
|
this.addAttribute(data[i].children) |
|
|
|
} |
|
|
|
} |
|
|
|
return data |
|
|
|
}, |
|
|
|
// 确定回调事件 |
|
|
|
treeConfirm(e) { |
|
|
|
this.searchForm.groupName = e[0].name; |
|
|
|
this.searchForm.groupId = e[0].id; |
|
|
|
this.status = 'loadmore' |
|
|
|
this.searchForm.pageNum = 1; |
|
|
|
this.monitorList = [] |
|
|
|
this.loadmore() |
|
|
|
}, |
|
|
|
// 取消回调事件 |
|
|
|
treeCancel(e) { |
|
|
|
// console.log(e) |
|
|
|
}, |
|
|
|
// 显示树形选择器 |
|
|
|
showTree() { |
|
|
|
this.$refs.tkitree._show(); |
|
|
|
}, |
|
|
|
cancelVideo() { |
|
|
|
this.showVideo = false; |
|
|
|
}, |
|
|
|
getGroupList() { |
|
|
|
groupList({}).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.treelist = [...[{ |
|
|
|
id: "", |
|
|
|
name: "全部", |
|
|
|
checked: true |
|
|
|
}], ...res.data]; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 获取视频地址 |
|
|
|
startClick(id,name) { |
|
|
|
this.sensorId = id; |
|
|
|
this.sensorName = name; |
|
|
|
this.showVideo = true; |
|
|
|
|
|
|
|
startUrl({ |
|
|
|
sensorId: id |
|
|
|
}).then(res => { |
|
|
|
|
|
|
|
let { |
|
|
|
code, |
|
|
|
data |
|
|
|
} = res; |
|
|
|
if (code == 200) { |
|
|
|
this.videoUrl = data.rtsPullStreamUrls[0].url; |
|
|
|
this.streamId = data.streamId; |
|
|
|
this.videoToken = data.videoToken; |
|
|
|
this.setVideo() |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
confirmVideo() { |
|
|
|
this.showVideo = false; |
|
|
|
}, |
|
|
|
|
|
|
|
isSelect() { |
|
|
|
|
|
|
|
}, |
|
|
|
scrolltolower() { |
|
|
|
if (this.status == 'loading' || this.status == 'nomore') { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.searchForm.pageNum += 1; |
|
|
|
this.loadmore() |
|
|
|
}, |
|
|
|
loadmore() { |
|
|
|
if (this.status != 'loadmore') return |
|
|
|
this.status = 'loading' |
|
|
|
this.isLoading = true; |
|
|
|
list(this.searchForm).then(res => { |
|
|
|
if (res?.code === 200) { |
|
|
|
this.monitorList = [...this.monitorList, ...res?.data?.list]; |
|
|
|
this.isLoading = false; |
|
|
|
// 获取到的总条数>=接口总条数 |
|
|
|
if (this.monitorList.length >= res.data.total) { |
|
|
|
this.status = 'nomore' |
|
|
|
} else { |
|
|
|
this.status = 'loadmore' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.container { |
|
|
|
padding: 20px; |
|
|
|
font-size: 14px; |
|
|
|
height: 800px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// .contentBox { |
|
|
|
// height: calc(100% - 375rpx); |
|
|
|
.inspectionCenter { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 88rpx); |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.u-modal__title { |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
|
|
|
|
.poupBox { |
|
|
|
height: 100vh; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 100%; |
|
|
|
z-index: 100000000000000; |
|
|
|
// background: red; |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
.videoHeader { |
|
|
|
height: 255rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.contentBox { |
|
|
|
// z-index: 1000000; |
|
|
|
width: 100%; |
|
|
|
height: 590rpx; |
|
|
|
background: #000; |
|
|
|
|
|
|
|
// margin: 50rpx auto; |
|
|
|
.closeBox { |
|
|
|
text-align: right; |
|
|
|
height: 80rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 0 25rpx; |
|
|
|
background: #fff; |
|
|
|
.title { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
.closes { |
|
|
|
|
|
|
|
// background: #ccc; |
|
|
|
} |
|
|
|
} |
|
|
|
.botbox { |
|
|
|
height:calc(100% - 80rpx); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-content { |
|
|
|
height: calc(100% - 590rpx -255rpx); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.searchBox { |
|
|
|
// height: calc(100% - 360rpx); |
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.searchLine { |
|
|
|
height: 88rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 15px; |
|
|
|
box-sizing: border-box; |
|
|
|
background: #fff; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
.searchLabels { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: calc(100% - 34rpx); |
|
|
|
|
|
|
|
image { |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
flex-shrink: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.labels { |
|
|
|
width: 120rpx; |
|
|
|
display: block; |
|
|
|
color: #333333; |
|
|
|
margin-left: 10rpx; |
|
|
|
flex-shrink: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.values { |
|
|
|
width: calc(100% - 40rpx - 120rpx); |
|
|
|
color: #2388FF; |
|
|
|
font-weight: 700; |
|
|
|
margin-left: 18rpx; |
|
|
|
overflow: hidden; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: pre-wrap; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.arrow { |
|
|
|
// text-align: right; |
|
|
|
// flex-shrink: 1; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 34rpx; |
|
|
|
height: 34rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.leftSearchBox { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: calc(100% - 40px); |
|
|
|
|
|
|
|
.searchLabel { |
|
|
|
flex-shrink: 1; |
|
|
|
color: #333333; |
|
|
|
width: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
.searchValue { |
|
|
|
width: calc(100% - 60px); |
|
|
|
margin-left: 10px; |
|
|
|
color: #2388FF; |
|
|
|
overflow: hidden; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: pre-wrap; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.searchDialog { |
|
|
|
position: absolute; |
|
|
|
z-index: 990; |
|
|
|
top: 89rpx; |
|
|
|
width: 100%; |
|
|
|
height: calc(100vh - 375rpx - 100rpx); |
|
|
|
font-size: 26rpx; |
|
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
|
|
|
|
|
.content { |
|
|
|
background: #FFFFFF; |
|
|
|
padding: 15px; |
|
|
|
box-sizing: border-box; |
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
|
|
|
|
.demo-layout { |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
background: #F5F5F5; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 0 10px; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.left-layout { |
|
|
|
color: #777777; |
|
|
|
} |
|
|
|
|
|
|
|
.right-layout {} |
|
|
|
|
|
|
|
.startBox { |
|
|
|
color: #777777; |
|
|
|
} |
|
|
|
|
|
|
|
text { |
|
|
|
color: #777777; |
|
|
|
} |
|
|
|
|
|
|
|
.endBox { |
|
|
|
color: #777777; |
|
|
|
} |
|
|
|
|
|
|
|
.timeIcon {} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btnBox { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 15px; |
|
|
|
|
|
|
|
.leftBtn { |
|
|
|
width: 50%; |
|
|
|
height: 74rpx; |
|
|
|
line-height: 74rpx; |
|
|
|
border: 1px solid #BABABA; |
|
|
|
border-radius: 12rpx; |
|
|
|
color: #333333; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.rightBtn { |
|
|
|
width: 50%; |
|
|
|
height: 74rpx; |
|
|
|
line-height: 74rpx; |
|
|
|
border: 1px solid #2388FF; |
|
|
|
border-radius: 12rpx; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
background: #2388FF; |
|
|
|
margin-left: 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tableBox { |
|
|
|
height: 100%; |
|
|
|
padding: 0 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.liBox { |
|
|
|
background: #fff; |
|
|
|
padding: 24rpx 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
|
|
|
|
.topCard { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.pic { |
|
|
|
position: relative; |
|
|
|
width: 268rpx; |
|
|
|
height: 201rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 268rpx; |
|
|
|
height: 201rpx; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.resolvingPower { |
|
|
|
position: absolute; |
|
|
|
top: 15rpx; |
|
|
|
right: 15rpx; |
|
|
|
background: #000000; |
|
|
|
color: #fff; |
|
|
|
padding: 8rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
font-size: 20rpx; |
|
|
|
border-radius: 4rpx; |
|
|
|
font-family: 'PingFang SC'; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.rightCard { |
|
|
|
margin-left: 20rpx; |
|
|
|
|
|
|
|
.firstCard { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 60rpx; |
|
|
|
|
|
|
|
.schoolName { |
|
|
|
font-size: 32rpx; |
|
|
|
font-family: 'PingFang SC'; |
|
|
|
font-weight: 700; |
|
|
|
color: #333333; |
|
|
|
overflow: hidden; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: pre-wrap; |
|
|
|
// font-size: 14px; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.secondCard, |
|
|
|
.thirdCard { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
|
|
.txt { |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: 'PingFang SC'; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btoCard { |
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
margin-top: 24rpx; |
|
|
|
padding: 24rpx 0 0 0; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.btoBox { |
|
|
|
// width: 33.3%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #333; |
|
|
|
font-family: 'PingFang SC'; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
margin-right: 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.rightBox { |
|
|
|
width: 120rpx; |
|
|
|
height: 60rpx; |
|
|
|
background: #2388FF; |
|
|
|
color: #fff; |
|
|
|
border-radius: 80rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// } |
|
|
|
</style> |
