suojin
/
HIYL-localization-web
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视讯-页面优化

Browse Source
main
ysn 2 days ago
parent 802d4a5462
commit 3be9ff6cf0
7 changed files with 159 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/assets/images/videoCommunication/在线质控.svg
  2. 32
      src/assets/images/videoCommunication/实时会诊.svg
  3. 24
      src/assets/images/videoCommunication/带教培训.svg
  4. 30
      src/assets/images/videoCommunication/病例研讨.svg
  5. 2
      src/assets/styles/sidebar.scss
  6. 2
      src/layout/components/Sidebar/Logo.vue
  7. 86
      src/views/videoCommunication/index.vue

28
src/assets/images/videoCommunication/在线质控.svg
Unescape View File

@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="93" viewBox="0 0 155 93">
<defs>
<linearGradient id="未命名的渐变_12" data-name="未命名的渐变 12" y1="46.5" x2="155" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#65c9f6" stop-opacity="0.68"/>
<stop offset="1" stop-color="#02a7f0"/>
</linearGradient>
</defs>
<title>质控</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<g>
<rect width="155" height="93" rx="4" ry="4" style="fill: url(#未命名的渐变_12)"/>
<path d="M0,59V89a3.88,3.88,0,0,0,3.73,4H151.27A3.88,3.88,0,0,0,155,89V59s-14.05-6-36.78-6C96.09,53,79.3,72,48.51,71S0,59,0,59Z" style="fill: #17aef1;opacity: 0.2"/>
<path d="M155,59V89a3.88,3.88,0,0,1-3.73,4H3.73A3.88,3.88,0,0,1,0,89V59s14.05-6,36.78-6c22.13,0,38.92,19,69.7,18S155,59,155,59Z" style="fill: #7ed2f7;opacity: 0.5"/>
</g>
<g style="opacity: 0.30000000000000004">
<path d="M129.06,57.8a9.21,9.21,0,0,0-4.64,17v3a2.07,2.07,0,0,0,2,2.09H132a2.07,2.07,0,0,0,2-2.09v-3a9.18,9.18,0,0,0,1.8-14.25A9.09,9.09,0,0,0,129.06,57.8Zm7,10.09a6.84,6.84,0,0,1-3.24,5,2.12,2.12,0,0,0-1,1.8V77.6h-5.26V74.67a2.12,2.12,0,0,0-1-1.8,6.89,6.89,0,0,1-3.33-5.59A6.81,6.81,0,0,1,124,62.49a7,7,0,0,1,10.19-.22A6.84,6.84,0,0,1,136.09,67.89Z" style="fill: #fff"/>
<rect x="123.27" y="80.69" width="11.86" height="2.3" rx="1.1" ry="1.1" style="fill: #fff"/>
<path d="M129,57.48a1.13,1.13,0,0,0,1.12-1.21v-4a1.12,1.12,0,1,0-2.22,0v4.08a1.12,1.12,0,0,0,1.1,1.15Z" style="fill: #fff"/>
<path d="M144,65.68h-4A1.15,1.15,0,0,0,140,68h4a1.15,1.15,0,1,0,0-2.29Z" style="fill: #fff"/>
<path d="M118.41,66h-4a1.13,1.13,0,0,0-1.12,1.15,1.15,1.15,0,0,0,1.12,1.16h4a1.15,1.15,0,0,0,1.12-1.16A1.13,1.13,0,0,0,118.41,66Z" style="fill: #fff"/>
<path d="M136.71,60.45a1.07,1.07,0,0,0,.78-.4l2.87-2.84a1.2,1.2,0,0,0,0-1.59,1.1,1.1,0,0,0-1.59,0l-2.85,2.88a1.2,1.2,0,0,0,0,1.59A1.15,1.15,0,0,0,136.71,60.45Z" style="fill: #fff"/>
<path d="M120.69,60.35a1.1,1.1,0,0,0,.77.32,1.12,1.12,0,0,0,.77-.38,1.2,1.2,0,0,0,0-1.59l-2.81-2.81a1.12,1.12,0,0,0-1.59,0,1.23,1.23,0,0,0,0,1.59Z" style="fill: #fff"/>
<path d="M130.8,61.52a1.13,1.13,0,0,0-1.24,1.08,1.16,1.16,0,0,0,1,1.26,3.43,3.43,0,0,1,2.61,2.61,1.13,1.13,0,0,0,1.05.8,1.48,1.48,0,0,0,.41-.06,1.18,1.18,0,0,0,.7-1.47A5.63,5.63,0,0,0,130.8,61.52Z" style="fill: #fff"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

32
src/assets/images/videoCommunication/实时会诊.svg
Unescape View File

@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="93" viewBox="0 0 155 93">
<defs>
<linearGradient id="未命名的渐变_11" data-name="未命名的渐变 11" y1="46.5" x2="155" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2ddbe2"/>
<stop offset="1" stop-color="#0396b6"/>
</linearGradient>
<linearGradient id="未命名的渐变_31" data-name="未命名的渐变 31" x1="9.341" y1="46.5" x2="163.385" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#65c9f6" stop-opacity="0.685"/>
<stop offset="1" stop-color="#027df0"/>
</linearGradient>
</defs>
<title>会诊</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<g>
<rect width="155" height="93" rx="4" ry="4" style="fill: url(#未命名的渐变_31)"/>
<path d="M0,59V89a3.88,3.88,0,0,0,3.73,4H151.27A3.88,3.88,0,0,0,155,89V59s-14.05-6-36.78-6C96.09,53,79.3,72,48.51,71S0,59,0,59Z" style="fill: #65c9f6;opacity: 0.2"/>
<path d="M155,59V89a3.88,3.88,0,0,1-3.73,4H3.73A3.88,3.88,0,0,1,0,89V59s14.05-6,36.78-6c22.13,0,38.92,19,69.7,18S155,59,155,59Z" style="fill: #65c9f6;opacity: 0.4"/>
</g>
<g style="opacity: 0.2">
<path d="M133.65,63.31h2.57a13.07,13.07,0,0,0-3.75-9.41A12.16,12.16,0,0,0,123.39,50v2.67a9.68,9.68,0,0,1,7.26,3.11,10.43,10.43,0,0,1,3,7.53Zm0,0" style="fill: #fff"/>
<path d="M128.52,63.31h2.56a7.83,7.83,0,0,0-2.25-5.63,7.3,7.3,0,0,0-5.44-2.34V58A4.82,4.82,0,0,1,127,59.54a5.23,5.23,0,0,1,1.5,3.77Zm0,0" style="fill: #fff"/>
<path d="M123.39,60.55v2.76H126a2.71,2.71,0,0,0-2.65-2.76Zm0,0" style="fill: #fff"/>
<path d="M105.13,65s1.59,6.14,5.48,5.65c3.9.49,5.48-5.65,5.48-5.65,1.82-2.26.38-3.54.38-3.54.45-8.21-5.86-7.84-5.86-7.84s-6.31-.38-5.86,7.84c0,0-1.44,1.28.38,3.54Zm0,0" style="fill: #fff"/>
<path d="M116.28,71.77H105.72l-5.42,2.86s-1,.26-2.82,8.18h26.27s-1.34-6.84-2.27-8.18Zm0,0" style="fill: #fff"/>
<path d="M137.6,80.4l.06-13.71a2.86,2.86,0,0,0-2.8-2.48h-16.6a3.71,3.71,0,0,1-.73,1.2h17.33a1.47,1.47,0,0,1,1.49,1.52V79.18h-12.1l.82,3.63h14.42V81.19Zm0,0" style="fill: #fff"/>
<path d="M122.85,70.89s.56,2.17,1.94,2c1.38.17,1.94-2,1.94-2,.64-.8.13-1.25.13-1.25.16-2.9-2.07-2.77-2.07-2.77s-2.23-.13-2.07,2.77c0,0-.51.45.13,1.25Zm0,0" style="fill: #fff"/>
<path d="M129.29,77.65a16.21,16.21,0,0,0-.84-3l-1.92-1.06h-3.91l-.41.22.1.08a6.65,6.65,0,0,1,1.44,3.74v0h5.55Zm0,0" style="fill: #fff"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

24
src/assets/images/videoCommunication/带教培训.svg
Unescape View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="93" viewBox="0 0 155 93">
<defs>
<linearGradient id="未命名的渐变_15" data-name="未命名的渐变 15" y1="46.5" x2="155" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffec15" stop-opacity="0.68"/>
<stop offset="1" stop-color="#ffa515"/>
</linearGradient>
<linearGradient id="未命名的渐变_32" data-name="未命名的渐变 32" x1="9.341" y1="46.5" x2="163.385" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffec15" stop-opacity="0.68"/>
<stop offset="1" stop-color="#ff8415"/>
</linearGradient>
</defs>
<title>教学</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<rect width="155" height="93" rx="4" ry="4" style="fill: url(#未命名的渐变_32)"/>
<path d="M0,59V89a3.88,3.88,0,0,0,3.73,4H151.27A3.88,3.88,0,0,0,155,89V59s-14.05-6-36.78-6C96.09,53,79.3,72,48.51,71S0,59,0,59Z" style="fill: #ff0;opacity: 0.30000000000000004"/>
<path d="M155,59V89a3.88,3.88,0,0,1-3.73,4H3.73A3.88,3.88,0,0,1,0,89V59s14.05-6,36.78-6c22.13,0,38.92,19,69.7,18S155,59,155,59Z" style="fill: #ff8c24;opacity: 0.30000000000000004"/>
<g style="opacity: 0.30000000000000004">
<path d="M141,56.7h-6.76l1.3-2.66a1.08,1.08,0,0,0-1.94-.93l-1.8,3.59h-11l-1.62-3.23a1.08,1.08,0,0,0-1.94.93l1.15,2.3h-6.75a1.08,1.08,0,1,0,0,2.16h3.09v14a3.83,3.83,0,0,0,3.81,3.81h2.14l-2.5,6.25a1.08,1.08,0,0,0,.57,1.44.91.91,0,0,0,.43.07,1.13,1.13,0,0,0,1-.65L123,76.67h6.17a1.12,1.12,0,0,0,0,.14l3,7.54a1.13,1.13,0,0,0,1,.65.91.91,0,0,0,.43-.07,1.18,1.18,0,0,0,.57-1.44l-2.73-6.82h3a3.85,3.85,0,0,0,3.88-3.81v-14H141a1.06,1.06,0,0,0,1.08-1.08A1.1,1.1,0,0,0,141,56.7Zm-6.39,17.82H118.55a1.63,1.63,0,0,1-1.65-1.65V63.24h19.4v9.63A1.63,1.63,0,0,1,134.64,74.51Zm1.65-13.43h-19.4V58.85h19.4Z" style="fill: #fff"/>
<path d="M130.76,66,125.59,69l-1.15-1.29a1.07,1.07,0,0,0-1.58,1.44L124,70.42a2.18,2.18,0,0,0,1.58.72,2.82,2.82,0,0,0,1-.22l5.17-3a1.06,1.06,0,1,0-1-1.87Z" style="fill: #fff"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

30
src/assets/images/videoCommunication/病例研讨.svg
Unescape View File

@ -0,0 +1,30 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="93" viewBox="0 0 155 93">
<defs>
<linearGradient id="未命名的渐变_38" data-name="未命名的渐变 38" y1="46.5" x2="155" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffa615" stop-opacity="0.68"/>
<stop offset="1" stop-color="#f05a24"/>
</linearGradient>
<linearGradient id="未命名的渐变_35" data-name="未命名的渐变 35" x1="9.341" y1="46.5" x2="163.385" y2="46.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3fffc6" stop-opacity="0.68"/>
<stop offset="1" stop-color="#02a7f0"/>
</linearGradient>
</defs>
<title>研讨</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<g>
<rect width="155" height="93" rx="4" ry="4" style="fill: url(#未命名的渐变_35)"/>
<path d="M0,59V89a3.88,3.88,0,0,0,3.73,4H151.27A3.88,3.88,0,0,0,155,89V59s-14.05-6-36.78-6C96.09,53,79.3,72,48.51,71S0,59,0,59Z" style="fill: #02a7f0;opacity: 0.2"/>
<path d="M155,59V89a3.88,3.88,0,0,1-3.73,4H3.73A3.88,3.88,0,0,1,0,89V59s14.05-6,36.78-6c22.13,0,38.92,19,69.7,18S155,59,155,59Z" style="fill: #3fffc6;opacity: 0.2"/>
</g>
<g style="opacity: 0.30000000000000004">
<path d="M111.31,69.07a3.37,3.37,0,0,0,3.37-3.37V63.8a3.37,3.37,0,0,0-6.73,0v1.9A3.37,3.37,0,0,0,111.31,69.07Zm-1-5.27a1,1,0,0,1,2,0v1.9a1,1,0,0,1-2,0Z" style="fill: #fff"/>
<path d="M115,78.44a5,5,0,0,0,4.42-2.71l.11-.21A1.77,1.77,0,0,0,117.94,73H115.8l-1.16-2.09a2.33,2.33,0,0,0-2-1.2h-.46a4.19,4.19,0,0,0-4.19,4.19v3.21a10,10,0,0,0,.75,3.79l2.17-.89a7.68,7.68,0,0,1-.57-2.91V73.85A1.85,1.85,0,0,1,112.13,72h.46l1.16,2.09a2.34,2.34,0,0,0,2,1.2h1.08a2.63,2.63,0,0,1-1.89.8,1.54,1.54,0,0,1-1.33-.76l-.46-.78a1.17,1.17,0,0,0-2,1.18l.46.78A3.88,3.88,0,0,0,115,78.44Z" style="fill: #fff"/>
<path d="M134.14,60.44a3.37,3.37,0,0,0-3.37,3.37v1.9a3.37,3.37,0,1,0,6.73,0V63.8A3.37,3.37,0,0,0,134.14,60.44Zm1,5.27a1,1,0,0,1-2,0V63.8a1,1,0,0,1,2,0Z" style="fill: #fff"/>
<path d="M133.31,69.66h-.46a2.33,2.33,0,0,0-2,1.2L129.64,73H127.5a1.77,1.77,0,0,0-1.57,2.57l.11.21a5,5,0,0,0,4.42,2.71,3.88,3.88,0,0,0,3.35-1.92l.46-.78a1.17,1.17,0,0,0-2-1.18l-.46.78a1.54,1.54,0,0,1-1.33.76,2.63,2.63,0,0,1-1.89-.8h1.08a2.34,2.34,0,0,0,2-1.2L132.85,72h.46a1.85,1.85,0,0,1,1.85,1.85v3.21a7.68,7.68,0,0,1-.57,2.91l2.17.89a10,10,0,0,0,.75-3.79V73.85a4.19,4.19,0,0,0-4.19-4.19Z" style="fill: #fff"/>
<path d="M115.22,70.39a1.17,1.17,0,0,0,1.4-.88h12a1.17,1.17,0,1,0,2.28-.53,2.34,2.34,0,0,0-2.28-1.81H128v-.88a5.26,5.26,0,0,0-2.31-4.36,3.77,3.77,0,0,0,.85-2.37V57.8a3.8,3.8,0,0,0-7.61,0v1.76a3.77,3.77,0,0,0,.85,2.37,5.26,5.26,0,0,0-2.31,4.36v.88h-.83A2.34,2.34,0,0,0,114.35,69,1.17,1.17,0,0,0,115.22,70.39Zm6-10.83V57.8a1.46,1.46,0,0,1,2.93,0v1.76a1.46,1.46,0,1,1-2.93,0Zm-1.46,6.73a2.93,2.93,0,0,1,5.85,0v.88h-5.85Z" style="fill: #fff"/>
<path d="M133.3,79.72a1.17,1.17,0,1,0-2.28.53l.33,1.41H114l.33-1.41a1.17,1.17,0,0,0-.88-1.41h0a1.17,1.17,0,0,0-1.41.88l-.33,1.41A2.34,2.34,0,0,0,114,84h17.4a2.34,2.34,0,0,0,2.28-2.87Z" style="fill: #fff"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

2
src/assets/styles/sidebar.scss
Unescape View File

@ -80,6 +80,8 @@
margin: 0 2px !important;
border-radius: 20px !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
}
// menu hover

2
src/layout/components/Sidebar/Logo.vue
Unescape View File

@ -78,10 +78,8 @@ export default {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}

86
src/views/videoCommunication/index.vue
Unescape View File

@ -29,9 +29,6 @@
<div class="title">
{{ mode.title }}
</div>
<div class="icon-bg">
<i :class="mode.icon"></i>
</div>
</div>
</div>
</el-card>
@ -50,10 +47,11 @@
stripe
height="calc(100vh - 550px)"
>
<el-table-column label="头像" prop="avatar" align="center" width="50">
<el-table-column label="头像" prop="avatar" align="left" width="40">
<template slot-scope="scope">
<!-- MINIO_ENDPOINT_HTTPS+scope.row.avatar -->
<el-avatar
:size="23"
:src="
$store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
scope.row.avatar
@ -61,20 +59,37 @@
/>
</template>
</el-table-column>
<el-table-column label="会诊名称" prop="name" align="center" />
<el-table-column
label="会诊名称"
prop="name"
align="left"
width="490"
>
<template slot-scope="scope">
<el-button type="text">
{{ scope.row.name }}
</el-button>
</template>
</el-table-column>
<el-table-column
label="会议类型名称"
prop="meet_type_name"
align="center"
/>
<el-table-column label="创建时间" prop="create_time" align="center" />
align="left"
width="420"
>
<template slot-scope="scope">
<el-button type="text">
{{ scope.row.meet_type_name }}
</el-button>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="create_time" align="left" />
<!-- 状态status 1-开始 0-结束 -->
<el-table-column label="操作" align="center" width="50">
<el-table-column label="操作" align="right">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-more"
class="more-btn"
@click="handleDetail(scope.row)"
/>
</template>
@ -317,7 +332,7 @@ export default {
align-items: center;
font-size: 16px;
font-weight: 500;
color: #333;
color: #009696;
.line {
display: inline-block;
@ -369,10 +384,8 @@ export default {
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
&:active {
@ -385,47 +398,34 @@ export default {
z-index: 1;
}
.icon-bg {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 40px;
opacity: 0.3;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 100% 100% 0 0;
}
&.blue {
background: linear-gradient(to right, #67c2ef, #2196f3);
background-image: url("~@/assets/images/videoCommunication/实时会诊.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
&.yellow {
background: linear-gradient(to right, #ffd54f, #ff9800);
background-image: url("~@/assets/images/videoCommunication/带教培训.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
&.grayblue {
background: linear-gradient(to right, #b0bec5, #29b6f6);
background-image: url("~@/assets/images/videoCommunication/在线质控.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
&.greenblue {
background: linear-gradient(to right, #43d8c9, #29b6f6);
background-image: url("~@/assets/images/videoCommunication/病例研讨.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
}
}
// 会诊记录表格
.more-btn {
color: #009696;
cursor: pointer;
}
}
</style>
Write Preview
Loading…
Cancel
Save