KH/kh-device-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 调整字体，按钮、表单的效果

Browse Source
This commit is contained in:
danshihao
2024-04-19 12:06:48 +08:00
parent 2c05270bbf
commit 290fd7c9c4
19 changed files with 184 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/font/Alibaba-PuHuiTi-Regular.ttf
BIN
View File
Binary file not shown.
src/assets/font/DingTalkJinBuTi-Regular.ttf
BIN
View File
Binary file not shown.
src/assets/font/Rubik-Regular.ttf
BIN
View File
Binary file not shown.
src/assets/font/font.css
+41
View File
@@ -0,0 +1,41 @@
@font-face {
font-family: 'Alimama ShuHeiTi';
src: url('~@assets/font/AlimamaShuHeiTi-Bold.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Audiowide';
src: url('~@assets/font/Audiowide-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DingTalk JinBuTi';
src: url('~@assets/font/DingTalkJinBuTi-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DingTalk JinBuTi';
src: url('~@assets/font/Alibaba-PuHuiTi-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UnidreamLED';
src: url('~@assets/font/UnidreamLED.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Rubik';
src: url('~@assets/font/Rubik-Regular.ttf');
font-weight: normal;
font-style: normal;
}
src/assets/icon/iconfont.css
+27
View File
@@ -0,0 +1,27 @@
@font-face {
font-family: "action-kh-device"; /* Project id 4514971 */
src: url('iconfont.woff2?t=1713496030195') format('woff2'),
url('iconfont.woff?t=1713496030195') format('woff'),
url('iconfont.ttf?t=1713496030195') format('truetype');
}
.action-kh-device {
font-family: "action-kh-device" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.actionsousuo:before {
content: "\e622";
}
.actionreload:before {
content: "\e788";
}
.actionbaocun2:before {
content: "\e6f3";
}
src/assets/icon/iconfont.js
+1
View File
@@ -0,0 +1 @@
window._iconfont_svg_string_4514971='<svg><symbol id="actionsousuo" viewBox="0 0 1024 1024"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" fill="" ></path></symbol><symbol id="actionreload" viewBox="0 0 1024 1024"><path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-0.7-8.9-4.9-10.3l-56.7-19.5c-4.1-1.4-8.6 0.7-10.1 4.8-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4-31.6 31.6-68.4 56.4-109.3 73.8-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27-40.9-17.3-77.7-42.1-109.3-73.8-31.6-31.6-56.4-68.4-73.7-109.4-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27 40.9 17.3 77.7 42.1 109.3 73.8 9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47c-5.3 4.1-3.5 12.5 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l0.8-180.9c-0.1-6.6-7.8-10.3-13-6.2z" ></path></symbol><symbol id="actionbaocun2" viewBox="0 0 1024 1024"><path d="M556.6 364.4c24.9 0 45.1-20.2 45-45v-28.7c0-24.8-20.2-45-45-45s-45 20.2-45 45v28.7c0 24.8 20.1 45 45 45z" ></path><path d="M896.5 262.4L784.2 132c-24-28-58.8-43.9-95.7-43.9H224.4C154.7 88.1 98 144.8 98 214.5v596.4c0 69.6 56.7 126.3 126.3 126.3h576.5c69.6 0 126.3-56.7 126.3-126.3v-466c0.1-30.3-10.8-59.6-30.6-82.5z m-258.3-81.2v253.4H387V181.2h251.2z m199 629.7c0 20-16.2 36.2-36.2 36.2H224.4c-20 0-36.2-16.2-36.2-36.2V214.5c0-20 16.2-36.2 36.2-36.2H297v301.4c0 24.8 20.2 45 45 45h341.2c24.9 0 45-20.2 45-45V205l100.2 116.2c5.7 6.6 8.8 14.9 8.8 23.6v466.1z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,c,i,s,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4514971,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),o()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(i=o,s=n.document,a=!1,r(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,l())})}function l(){a||(a=!0,i())}function r(){try{s.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
src/assets/icon/iconfont.json
+30
View File
@@ -0,0 +1,30 @@
{
"id": "4514971",
"name": "kh-device-client",
"font_family": "action-kh-device",
"css_prefix_text": "action",
"description": "",
"glyphs": [
{
"icon_id": "1304890",
"name": "搜索",
"font_class": "sousuo",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "4765852",
"name": "reload",
"font_class": "reload",
"unicode": "e788",
"unicode_decimal": 59272
},
{
"icon_id": "37118160",
"name": "保存2",
"font_class": "baocun2",
"unicode": "e6f3",
"unicode_decimal": 59123
}
]
}
src/assets/icon/iconfont.less
+13
View File
@@ -0,0 +1,13 @@
@import "./iconfont.css";
:global(.anticon) {
&:before {
font-family: "action", "action-kh-device", serif !important;
}
}
// 折叠时隐藏文字
.ant-menu-inline-collapsed .iconfont + span {
display: inline-block;
max-width: 0;
opacity: 0;
}
src/assets/icon/iconfont.ttf
BIN
View File
Binary file not shown.
src/assets/icon/iconfont.woff
BIN
View File
Binary file not shown.
src/assets/icon/iconfont.woff2
BIN
View File
Binary file not shown.
src/assets/less/common.less
+43 -16
View File
@@ -1,14 +1,5 @@
@import "./modifyLessVars.less";
// 阿里妈妈数黑体
@font-face {
font-family: 'Alimama ShuHeiTi';
src: url('~@assets/font/AlimamaShuHeiTi-Bold.ttf');
}
// 阿里妈妈数黑体
@font-face {
font-family: 'Audiowide';
src: url('~@assets/font/Audiowide-Regular.ttf');
}
/*列表上方操作按钮区域*/
.ant-card-body .table-operator {
//margin-bottom: 8px;
@@ -223,6 +214,20 @@ div.ant-table table,
input.ant-input,
textarea.ant-input {
background-color: transparent;
transition: all .3s;
&:hover {
border-color: rgba(143,199,255,0.65);
box-shadow: 0 0 0 1px rgba(143,199,255,0.65) inset;
}
&:focus {
border-color: @primary-color;
box-shadow: 0 0 0 1px @primary-color inset;
}
}
.ant-input-affix-wrapper:hover input.ant-input:not(.ant-input-disabled),
.ant-input-affix-wrapper:hover textarea.ant-input:not(.ant-input-disabled) {
border-color: rgba(143,199,255,0.65);
}
.mobile-html textarea.ant-input {
resize:none;
@@ -251,9 +256,26 @@ textarea.ant-input {
color: @primary-color;
font-size: 14px;
}
.ant-select .ant-select-selection {
border-radius: 2px;
background-color: transparent;
.ant-select {
.ant-select-selection {
border-radius: 2px;
background-color: transparent;
transition: all .3s;
}
.ant-select-selection:hover {
border-color: rgba(143,199,255,0.65);
box-shadow: 0 0 0 1px rgba(143,199,255,0.65) inset;
}
.ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active {
border-color: @primary-color;
box-shadow: 0 0 0 1px @primary-color inset;
}
&.ant-select-open .ant-select-selection {
border-color: @primary-color;
box-shadow: 0 0 0 1px @primary-color inset;
}
}
/* 下拉框end */
@@ -295,9 +317,9 @@ button.ant-btn {
.btn-icon {
margin-right: 4px;
margin-bottom: 2px;
width: 14px;
height: 14px;
font-size: 14px;
}
&.ant-btn-primary {
background: #8FC7FF;
@@ -309,6 +331,12 @@ button.ant-btn {
background: transparent;
border: 1px solid #8FC7FF;
}
&:not([disabled]):active {
background-color: @border-color-base !important;
border-color: @border-color-base !important;
color: @text-color !important;
}
}
// 禁用
&.ant-btn-primary-disabled,
@@ -340,9 +368,9 @@ button.ant-btn {
.btn-icon {
margin-right: 0.04rem;
margin-bottom: 0.02rem;
width: 0.14rem;
height: 0.14rem;
font-size: 0.14rem;
}
&.ant-btn-primary {
&.ant-btn-background-ghost {
@@ -431,7 +459,6 @@ button.ant-btn {
font-weight: 400;
font-size: 14px;
color: @text-color;
line-height: 16px;
}
.over-text {
overflow: hidden;
src/components/menu/FirstLevelMenu.vue
+7 -9
View File
@@ -74,13 +74,13 @@ export default {
// 选择菜单
selectMenu (menu) {
console.log(menu)
if (menu.path !== '/systemOverview') {
this.$warning({
title: '系统建设中',
onOk: () => {}
})
return
}
// if (menu.path !== '/systemOverview') {
// this.$warning({
// title: '系统建设中',
// onOk: () => {}
// })
// return
// }
this.selectPath = menu.path
if (menu.children && menu.children.length > 0) {
this.$router.push({ path: menu.children[0].path })
@@ -198,7 +198,6 @@ export default {
font-size: 16px;
color: rgba(255,255,255,0.96);
line-height: 19px;
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
}
// 选中的样式
@@ -220,7 +219,6 @@ export default {
font-size: 16px;
color: @primary-color;
line-height: 19px;
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
}
}
}
src/components/page/GlobalHeader.vue
-4
View File
@@ -199,10 +199,6 @@ export default {
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
@height: 48px;
@font-face {
font-family: 'UnidreamLED';
src: url('~@assets/font/UnidreamLED.ttf');
}
.system-title {
user-select: none;
position: absolute;
src/main.js
+4
View File
@@ -50,6 +50,10 @@ import '@/components/JVxeCells/install'
import { rules } from '@/utils/rules'
// 导入vant
import '@/components/lazy_vant'
// 引入字体
import '@/assets/font/font.css'
// 引入自定义icon
import '@/assets/icon/iconfont.less'
require('@/components/onlineForm/onlineForm')
require('@/components/onlineForm/OnlineForm.css')
src/views/mobile/manage/Manage.vue
+3 -16
View File
@@ -104,12 +104,10 @@
</a-form-item>
</div>
<div class="flex-center">
<a-button type="primary" ghost @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;flex: 1;">
<img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
<a-button type="primary" icon="reload" ghost @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;flex: 1;">
<span class="btn-text">重置</span>
</a-button>
<a-button type="primary" @click="handleAddDevice" style="flex: 1;">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<a-button type="primary" icon="plus" @click="handleAddDevice" style="flex: 1;">
<span class="btn-text">添加</span>
</a-button>
</div>
@@ -154,8 +152,7 @@
</a-form-item>
</div>
<div class="flex-center">
<a-button type="primary" style="flex: 1;" @click="handleAddWellhead">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<a-button type="primary" icon="plus" style="flex: 1;" @click="handleAddWellhead">
<span class="btn-text">添加</span>
</a-button>
</div>
@@ -583,14 +580,4 @@ export default {
margin-left: 0.06rem;
}
}
// 表单边框
.manage-page-form {
/deep/.ant-form-item-control:not(.has-error) {
.ant-input,
.ant-select-selection {
border-color: @primary-color;
}
}
}
</style>
src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
+3 -5
View File
@@ -125,11 +125,10 @@
</div>
<div class="flex-center">
<a-button type="primary" ghost @click="handleResetForm(deviceForm)" style="margin-right: 16px;">
<img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
<span class="action-kh-device actionreload btn-icon"></span>
<span class="btn-text">重置</span>
</a-button>
<a-button type="primary" @click="handleAddDevice">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<a-button type="primary" icon="plus" @click="handleAddDevice">
<span class="btn-text">添加</span>
</a-button>
</div>
@@ -166,8 +165,7 @@
</a-form-item>
</div>
<div class="flex-center">
<a-button type="primary" @click="handleAddWellhead">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<a-button type="primary" icon="plus" @click="handleAddWellhead">
<span class="btn-text">添加</span>
</a-button>
</div>
src/views/systemOverview/systemSettings/SystemSettings.vue
+3 -4
View File
@@ -32,11 +32,11 @@
</div>
<div class="flex-center">
<a-button type="primary" ghost @click="handleResetSysSettingForm" style="margin-right: 16px;">
<img :src="require('@assets/images/icon/refresh.png')" alt="恢复默认设置" class="btn-icon">
<span class="action-kh-device actionreload btn-icon"></span>
<span class="btn-text">恢复默认设置</span>
</a-button>
<a-button type="primary" @click="handleSaveSysSetting">
<img :src="require('@assets/images/icon/save.png')" alt="保存设置" class="btn-icon">
<span class="action-kh-device actionbaocun2 btn-icon"></span>
<span class="btn-text">保存设置</span>
</a-button>
</div>
@@ -129,8 +129,7 @@
</a-col>
</a-row>
<div class="flex-center">
<a-button type="primary" @click="handleAddUser">
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
<a-button type="primary" icon="plus" @click="handleAddUser">
<span class="btn-text">添加</span>
</a-button>
</div>
src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+9 -7
View File
@@ -18,8 +18,8 @@
</a-select>
<span class="search-operate-btns">
<a-button style="width: 88px;" type="primary" @click="searchQuery">
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
<span class="btn-text">查询</span>
<span class="action-kh-device actionsousuo btn-icon"></span>
<span cclass="btn-text">查询</span>
</a-button>
</span>
</a-form-item>
@@ -94,9 +94,9 @@
<img :src="workingStatus" alt="油井工作状态">
</div>
<div class="working-status-btns">
<a-button @click="handleChangeWorkingCondition(true)" type="primary">远程启井</a-button>
<a-button @click="handleChangeWorkingCondition(false)" ghost type="primary">远程停井</a-button>
<a-button @click="handleChangeWorkingCondition(true)" ghost type="primary">频率控制</a-button>
<a-button @click="handleChangeWorkingCondition(true, 1)" :ghost="workingStatusCode !== 1" type="primary">远程启井</a-button>
<a-button @click="handleChangeWorkingCondition(false, 2)" :ghost="workingStatusCode !== 2" type="primary">远程停井</a-button>
<a-button @click="handleChangeWorkingCondition(true, 3)" :ghost="workingStatusCode !== 3" type="primary">频率控制</a-button>
</div>
</div>
</common-card>
@@ -188,7 +188,7 @@
:dataSource="this.dataSource.length ? [{}]: []"
:pagination="false">
<div slot="actionBatch" class="action-batch">
<a href='javascript:' @click="handleAllAlarms" class="all-alarms">全<br/>部<br/>报<br/>警</a>
<a-button type="primary" @click="handleAllAlarms" class="all-alarms">全<br/>部<br/>报<br/>警</a-button>
</div>
</a-table>
</div>
@@ -363,6 +363,7 @@ export default {
working: require('@assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
// 是否工作中
workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
workingStatusCode: 1, // 1远程启井 2远程停井 3频率控制
isWorking: true,
loading: false,
queryParam: {},
@@ -764,8 +765,9 @@ export default {
this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption(option)
},
// 油井工作状态
handleChangeWorkingCondition (status) {
handleChangeWorkingCondition (status, statusCode) {
this.isWorking = status
this.workingStatusCode = statusCode
if (status === true) {
this.workingStatus = this.working
} else if (status === false) {