添加鸿蒙及思源字体,删除其他字体等

master
yujialong 4 months ago
parent e17d895b2e
commit 3f193aba12
  1. 49
      src/layouts/footer/index.vue
  2. 1
      src/layouts/navbar/index.vue
  3. 274
      src/libs/util.js
  4. 9
      src/mixins/page/index.js
  5. 4
      src/pages/column/index.vue
  6. 14
      src/pages/iasf/index.vue
  7. 36
      src/styles/common.scss
  8. BIN
      src/styles/font/HarmonyOS_SansSC_Light.ttf
  9. BIN
      src/styles/font/PingFang-Regular.otf
  10. BIN
      src/styles/font/PingFangSC-Medium.otf
  11. BIN
      src/styles/font/PingFangTC-Semibold.ttf
  12. BIN
      src/styles/font/ProximaNova-Regular.otf
  13. BIN
      src/styles/font/SF-Pro-Display-Bold.otf
  14. BIN
      src/styles/font/SourceHanSansCN-VF-2.otf
  15. 2
      src/styles/layout/index.scss
  16. 2
      src/styles/lib/_style.scss

@ -1,31 +1,5 @@
<template> <template>
<div> <div>
<div v-if="showDefaultPath.includes($route.path)" :class="['footer', { iasf: isIasf }]">
<div class="mask"></div>
<ul v-if="isIasf" class="entry">
<li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[14].form)">
<img class="icon" :src="modules[14].form.pic" alt="">
<p class="text">{{ modules[14].form.title }}</p>
</li>
<li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[15].form)">
<img class="icon" :src="modules[15].form.pic" alt="">
<p class="text">{{ modules[15].form.title }}</p>
</li>
<li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[16].form)">
<img class="icon" :src="modules[16].form.pic" alt="">
<p class="text">{{ modules[16].form.title }}</p>
</li>
<li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[17].form)">
<img class="icon" :src="modules[17].form.pic" alt="">
<p class="text">{{ modules[17].form.title }}</p>
</li>
<li :class="{ 'cursor-pointer': isLink(modules[18].form.link.linkName) }" @click="openLink(modules[18].form)">
<img class="icon" :src="modules[18].form.pic" alt="">
<p class="text">{{ modules[18].form.title }}</p>
</li>
</ul>
</div>
<!-- 这里需要读取后台的页脚设置有3种样式 --> <!-- 这里需要读取后台的页脚设置有3种样式 -->
<template v-if="footers.length"> <template v-if="footers.length">
<!-- 常规样式 --> <!-- 常规样式 -->
@ -79,7 +53,7 @@
<div v-else-if="styleId === 2" class="footer"> <div v-else-if="styleId === 2" class="footer">
<div class="relative text-center"> <div class="relative text-center">
<img :src="footers[0].form.pic" alt=""> <img :src="footers[0].form.pic" alt="">
<div class="columns flex j-center a-center m-t-20"> <div class="columns flex j-center m-t-20">
<div v-for="(item, i) in columns" :key="i" class="column"> <div v-for="(item, i) in columns" :key="i" class="column">
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
<ul v-if="item.children.length" class="children"> <ul v-if="item.children.length" class="children">
@ -137,10 +111,8 @@ export default {
data () { data () {
return { return {
isIasf: false, isIasf: false,
showDefaultPath: ['/iasf'], //
showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], // showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], //
columns: [], columns: [],
modules: [],
floatings: [], floatings: [],
footers: [], footers: [],
styleId: 1, styleId: 1,
@ -183,20 +155,6 @@ export default {
this.columns = data.slice(0, 5) this.columns = data.slice(0, 5)
}).catch(err => { }) }).catch(err => { })
}, },
// iasf
getInfo () {
// /
this.$route.query.id && this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.$route.query.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
}
}).catch(err => { })
},
// //
async getFloating () { async getFloating () {
const { id } = this.$route.query const { id } = this.$route.query
@ -295,12 +253,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer { .footer {
z-index: 3;
position: relative; position: relative;
padding: 48px 20% 25px; padding: 48px 20% 25px;
color: #fff; color: #fff;
background-color: #091733; background-color: #091733;
overflow: hidden; overflow: hidden;
background: rgba(0, 5, 12, .8) url(../../assets/images/footer-bg.png) no-repeat; background: rgba(0, 5, 12, 1) url(../../assets/images/footer-bg.png) no-repeat;
.meta { .meta {
margin-bottom: 10px; margin-bottom: 10px;
@ -382,6 +341,7 @@ export default {
} }
.contact { .contact {
z-index: 3;
position: relative; position: relative;
padding: 0 0 106px 0; padding: 0 0 106px 0;
background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat; background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
@ -466,6 +426,7 @@ export default {
} }
.footer3 { .footer3 {
z-index: 3;
position: relative; position: relative;
padding: 30px 0; padding: 30px 0;
background-color: #000; background-color: #000;

@ -124,6 +124,7 @@ export default {
const home = this.isHome const home = this.isHome
if (this.lastHome !== home) this.showMenu = false if (this.lastHome !== home) this.showMenu = false
this.bgColor = home ? 'transparent' : '#fff' this.bgColor = home ? 'transparent' : '#fff'
if (this.$route.path !== '/home') this.textColor = home ? '#f9f9f9' : '#333'
this.lastHome !== home && this.$nextTick(() => { this.lastHome !== home && this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.showMenu = true this.showMenu = true

@ -11,145 +11,145 @@ const exts = {
doc: 'doc,docx,txt,xls,xlsx,csv,xml,ppt,pptx' doc: 'doc,docx,txt,xls,xlsx,csv,xml,ppt,pptx'
} }
// 各个站点首页的路径 // 各个站点首页的路径
const indexPath = ['/home', '/sfel', '/estate/index', '/iasf'] const indexPath = ['/home', '/sfel', '/estate/index']
const util = { const util = {
local: _local, local: _local,
//返回格式化时间,传参例如:"yyyy-MM-dd hh:mm:ss" //返回格式化时间,传参例如:"yyyy-MM-dd hh:mm:ss"
formatDate(fmt, date) { formatDate (fmt, date) {
var date = date ? date : new Date(); var date = date ? date : new Date();
var o = { var o = {
"M+": date.getMonth() + 1, //月份 "M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日 "d+": date.getDate(), //日
"h+": date.getHours(), //小时 "h+": date.getHours(), //小时
"m+": date.getMinutes(), //分 "m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒 "s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度 "q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒 "S": date.getMilliseconds() //毫秒
}; };
if (/(y+)/.test(fmt)) { if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
} }
for (var k in o) { for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) { if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
},
// 传入文件后缀判断是否是视频
isVideo(ext) {
if (exts.video.includes(ext)) return true;
return false;
},
// 传入文件后缀判断是否是音频
isAudio(ext) {
if (exts.audio.includes(ext)) return true;
return false;
},
// 传入文件后缀判断是否是图片
isImg(ext) {
if (exts.img.includes(ext)) return true;
return false;
},
// 传入文件后缀判断是否是pdf以外的文档
isDoc(ext) {
if (exts.doc.includes(ext)) return true;
return false;
},
// 传入文件名和路径,下载图片视频,支持跨域,a标签加download不支持跨域
downloadFile(fileName, url) {
var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = "blob";
x.onload = function(e) {
var url = window.URL.createObjectURL(x.response);
var a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
};
x.send();
},
// 传入文件名和数据,下载文件
downloadFileDirect(fileName,data) {
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(data)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(data, fileName)
}
},
// 成功提示
successMsg(message, duration = 3000) {
Message.closeAll();
return Message.success({
message,
showClose: true,
duration
});
},
// 警告提示
warningMsg(message, duration = 3000) {
Message.closeAll();
return Message.warning({
message,
showClose: true,
duration
});
},
// 错误提示
errorMsg(message, duration = 3000) {
Message.closeAll();
return Message.error({
message,
showClose: true,
duration
});
},
// 去掉html里的标签及空格
removeTag(list, prop = 'mainBody') {
list.map(e => {
// 有摘要取摘要,没有摘要就去掉正文里的标签空格(也可以通过正则去除html标签,不过富文本里会有插入IE注释的情况下,直接创建一个元素取text比较简单)
const text = e.summary || e[prop].replace(/(<p class="img-des">[^>]+<\/p>)|((&nbsp;)+)/g , '')
const el = document.createElement('div')
el.innerHTML = text
// e.mainBody = e.summary || e[prop].replace(/(<p class="img-des">[^>]+<\/p>)|(<\!--[^-->]+-->)|(<[^>]+>)|((&nbsp;)+)/g , '')
e.mainBody = el.innerText
e.releaseTime = e.releaseTime.split(' ')[0]
})
return list
},
// 获取url里的参数
getQuery(name) {
let url = window.location.href
let param = new Object()
if (url.indexOf("?") != -1) {
let str = url.split('?')[1]
let strs = str.split("&")
for(var i = 0; i < strs.length; i ++) {
param[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])
}
} }
return param[name] || null }
}, return fmt;
// 是否是各个站点的首页,首页的导航样式不一样,所以要单独判断 },
isIndex() { // 传入文件后缀判断是否是视频
return indexPath.includes(Router.app.$route.path) isVideo (ext) {
}, if (exts.video.includes(ext)) return true;
// 传入站点id,判断是否英文 return false;
isEn(id) { },
return Setting.enIds.includes(+id) // 传入文件后缀判断是否是音频
}, isAudio (ext) {
// rsa加密(这里无需加密,但是全部页面的请求都有调这个方法,因此直接返回即可) if (exts.audio.includes(ext)) return true;
rsa(data) { return false;
return data },
}, // 传入文件后缀判断是否是图片
isImg (ext) {
if (exts.img.includes(ext)) return true;
return false;
},
// 传入文件后缀判断是否是pdf以外的文档
isDoc (ext) {
if (exts.doc.includes(ext)) return true;
return false;
},
// 传入文件名和路径,下载图片视频,支持跨域,a标签加download不支持跨域
downloadFile (fileName, url) {
var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = "blob";
x.onload = function (e) {
var url = window.URL.createObjectURL(x.response);
var a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
};
x.send();
},
// 传入文件名和数据,下载文件
downloadFileDirect (fileName, data) {
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(data)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(data, fileName)
}
},
// 成功提示
successMsg (message, duration = 3000) {
Message.closeAll();
return Message.success({
message,
showClose: true,
duration
});
},
// 警告提示
warningMsg (message, duration = 3000) {
Message.closeAll();
return Message.warning({
message,
showClose: true,
duration
});
},
// 错误提示
errorMsg (message, duration = 3000) {
Message.closeAll();
return Message.error({
message,
showClose: true,
duration
});
},
// 去掉html里的标签及空格
removeTag (list, prop = 'mainBody') {
list.map(e => {
// 有摘要取摘要,没有摘要就去掉正文里的标签空格(也可以通过正则去除html标签,不过富文本里会有插入IE注释的情况下,直接创建一个元素取text比较简单)
const text = e.summary || e[prop].replace(/(<p class="img-des">[^>]+<\/p>)|((&nbsp;)+)/g, '')
const el = document.createElement('div')
el.innerHTML = text
// e.mainBody = e.summary || e[prop].replace(/(<p class="img-des">[^>]+<\/p>)|(<\!--[^-->]+-->)|(<[^>]+>)|((&nbsp;)+)/g , '')
e.mainBody = el.innerText
e.releaseTime = e.releaseTime.split(' ')[0]
})
return list
},
// 获取url里的参数
getQuery (name) {
let url = window.location.href
let param = new Object()
if (url.indexOf("?") != -1) {
let str = url.split('?')[1]
let strs = str.split("&")
for (var i = 0; i < strs.length; i++) {
param[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])
}
}
return param[name] || null
},
// 是否是各个站点的首页,首页的导航样式不一样,所以要单独判断
isIndex () {
return indexPath.includes(Router.app.$route.path)
},
// 传入站点id,判断是否英文
isEn (id) {
return Setting.enIds.includes(+id)
},
// rsa加密(这里无需加密,但是全部页面的请求都有调这个方法,因此直接返回即可)
rsa (data) {
return data
},
}; };
export default util; export default util;

@ -14,6 +14,15 @@ export default {
return this.$route.query.siteId || this.$store.getters.site return this.$route.query.siteId || this.$store.getters.site
} }
}, },
watch: {
'$route.query' () {
const { id } = this.$route.query
if (id) {
this.id = id
this.getInfo()
}
}
},
mounted () { mounted () {
this.getInfo && this.$route.query.id && this.init() this.getInfo && this.$route.query.id && this.init()
}, },

@ -904,7 +904,7 @@ export default {
/deep/.columns { /deep/.columns {
&+.detail { &+.detail {
padding-left: 10px; padding-left: 20px;
} }
width: 22%; width: 22%;
@ -1253,7 +1253,7 @@ export default {
.detail { .detail {
flex: 1; flex: 1;
max-width: 77%; max-width: 77%;
padding: 10px 15px; padding: 20px;
background-color: #fff; background-color: #fff;
overflow: auto; overflow: auto;

@ -24,9 +24,8 @@
<li :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }" <li :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
@click="openLink(modules[2].form)"> @click="openLink(modules[2].form)">
<img class="pic" :src="modules[2].form.pic" alt=""> <img class="pic" :src="modules[2].form.pic" alt="">
<div class="project">SILF</div> <div class="project">{{ modules[2].form.title }}</div>
<div class="texts"> <div class="texts">
<div class="name">SILF</div>
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<p class="des">{{ modules[2].form.des }}</p> <p class="des">{{ modules[2].form.des }}</p>
</div> </div>
@ -34,9 +33,8 @@
<li :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }" <li :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
@click="openLink(modules[3].form)"> @click="openLink(modules[3].form)">
<img class="pic" :src="modules[3].form.pic" alt=""> <img class="pic" :src="modules[3].form.pic" alt="">
<div class="project">S³FEL</div> <div class="project">{{ modules[3].form.title }}</div>
<div class="texts"> <div class="texts">
<div class="name">S³FEL</div>
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<p class="des">{{ modules[3].form.des }}</p> <p class="des">{{ modules[3].form.des }}</p>
</div> </div>
@ -312,7 +310,7 @@ export default {
if (json[6].form.column.length) { if (json[6].form.column.length) {
const { column, articleNum } = json[6].form const { column, articleNum } = json[6].form
this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles1 = Util.removeTag(data.slice(0, articleNum || 4)) this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
if (this.articles1.length) this.curArticle1 = this.articles1[0] if (this.articles1.length) this.curArticle1 = this.articles1[0]
}).catch(err => { }) }).catch(err => { })
@ -599,7 +597,7 @@ $bannerMh: 800px;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 45px; font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
@ -631,7 +629,7 @@ $bannerMh: 800px;
h6 { h6 {
margin: 10px 0 20px; margin: 10px 0 20px;
line-height: 63px; line-height: 63px;
font-size: 45px; font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
@ -1139,7 +1137,7 @@ $bannerMh: 800px;
.tools { .tools {
z-index: 10; z-index: 10;
position: fixed; position: fixed;
top: 60vh; top: 30vh;
right: 0; right: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

@ -2,44 +2,17 @@
@import './var.scss'; @import './var.scss';
@font-face { @font-face {
font-family: PingFang; font-family: Harmony;
src: url('font/PingFang-Regular.otf'); src: url('font/HarmonyOS_SansSC_Light.ttf');
} }
@font-face { @font-face {
font-family: PingFangSC-Medium; font-family: siyuan;
src: url('font/PingFangSC-Medium.otf'); src: url('font/SourceHanSansCN-VF-2.otf');
}
@font-face {
font-family: PingFangSC-Semibold;
src: url('font/PingFangTC-Semibold.ttf');
}
@font-face {
font-family: SFProDisplay-Bold;
src: url('font/SF-Pro-Display-Bold.otf');
}
@font-face {
font-family: SFProDisplay;
src: url('font/SF-Pro-Display-Regular.otf');
}
@font-face {
font-family: toppan;
src: url('font/toppan.otf');
}
@font-face {
font-family: ProximaNova;
src: url('font/ProximaNova-Regular.otf');
}
@font-face {
font-family: AlimamaShuHeiTi-Bold;
src: url('font/AlimamaShuHeiTi-Bold.otf');
} }
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
.site-en {
font-family: SFProDisplay;
}
.flex-between { .flex-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -71,7 +44,6 @@
position: relative; position: relative;
padding-bottom: 20px; padding-bottom: 20px;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #000; color: #000;
line-height: 1.6; line-height: 1.6;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;

@ -11,7 +11,7 @@ body,
body { body {
// min-width: 1280px; // min-width: 1280px;
font-family: PingFang, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; font-family: Harmony, STHeiTi, sans-serif;
font-size: 14px; font-size: 14px;
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
} }

@ -1,3 +1,3 @@
html { html {
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; font-family: Harmony, STHeiTi, sans-serif;
} }

Loading…
Cancel
Save