480 lines
10 KiB
Vue
480 lines
10 KiB
Vue
<template>
|
||
<div>
|
||
|
||
|
||
<!-- footer部分 -->
|
||
<div class="footer">
|
||
<div class="footer-content">
|
||
<!-- 顶部信息 -->
|
||
<div class="footer-center">
|
||
<div class="footer-top">
|
||
<div class="logo-footer">
|
||
<img :src="logoImg" alt="公司logo" v-if="logoImg">
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-dizhi"></i>
|
||
<span class="label">地址：</span>
|
||
<span class="value">{{ address }}</span>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-dianhua"></i>
|
||
<span class="label">电话：</span>
|
||
<div class="phone-numbers">
|
||
<a href="tel:400-6150805" class="phone-link">400-6150805</a>
|
||
<span class="phone-separator">/</span>
|
||
<a href="tel:010-65917875" class="phone-link">010-65917875</a>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-youxiang"></i>
|
||
<span class="label">邮箱：</span>
|
||
<a href="mailto:Open-computing@kaiyuancloud.cn" class="email-link">
|
||
Open-computing@kaiyuancloud.cn
|
||
</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-dianhua"></i>
|
||
<span class="label">ICP备案号：</span>
|
||
<div class="phone-numbers">
|
||
<span class="icp-number">{{ ICP }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mobile-qr">
|
||
<div class="qr-item">
|
||
<div class="qr-code">
|
||
<img src="@/assets/kyy/kyy公众号.jpg" alt="微信客服二维码">
|
||
</div>
|
||
<span class="qr-desc">关注公众号</span>
|
||
</div>
|
||
<div class="qr-item">
|
||
<div class="qr-code">
|
||
<img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
|
||
</div>
|
||
<span class="qr-desc">微信客服</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备案信息 -->
|
||
<!-- <div class="footer-bottom">
|
||
|
||
|
||
<div class="record-info">
|
||
<div class="police-record">
|
||
<img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
|
||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
|
||
class="police-link">
|
||
京公网安备 11010502054007号
|
||
</a>
|
||
</div>
|
||
<div class="license-record">
|
||
<router-link tag="a" target="_blank" class="license-link" :to="{ name: 'homePageImage' }">
|
||
经营许可证：京B2-20232313
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getLogoAPI } from "@/api/login"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
// 公司信息
|
||
logoImg: require("@/assets/logo/colorLogo.png"),
|
||
logoText: "开元云(北京)科技有限公司",
|
||
url: window.location.href,
|
||
photosUrl: [],
|
||
ICP: "京ICP备2022001945号-1",
|
||
address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
duplicatedImages() {
|
||
return [...this.images, ...this.images]
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.getCompanyInfo()
|
||
},
|
||
|
||
methods: {
|
||
// 获取公司信息
|
||
async getCompanyInfo() {
|
||
const params = {
|
||
url_link: this.parseURL(this.url)
|
||
}
|
||
|
||
const res = await getLogoAPI(params)
|
||
|
||
if (res.status && res.data && res.data.length) {
|
||
this.photosUrl = res.data[0]
|
||
|
||
if (this.photosUrl.orgname !== '业主机构') {
|
||
this.logoImg = this.photosUrl.logo || this.logoImg
|
||
this.logoText = this.photosUrl.orgname || this.logoText
|
||
this.ICP = this.photosUrl.license_number || this.ICP
|
||
this.address = this.photosUrl.address || this.address
|
||
}
|
||
} else {
|
||
this.showErrorMessage(res.msg || '获取公司信息失败')
|
||
}
|
||
},
|
||
|
||
// 解析URL
|
||
parseURL(url) {
|
||
if (url.includes("#")) {
|
||
return url.split("#")[0]
|
||
}
|
||
return url
|
||
},
|
||
|
||
// 显示错误信息
|
||
showErrorMessage(message) {
|
||
this.$message({
|
||
message,
|
||
type: "error"
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
/* Footer样式 */
|
||
.footer {
|
||
width: 100%;
|
||
background: #f6f8fd;
|
||
color: #333;
|
||
padding: 0.4rem 0.2rem 0.4rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-top: 1px solid #e8edf5;
|
||
}
|
||
|
||
.footer-content {
|
||
max-width: 12.8rem;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
/* 顶部信息区域 */
|
||
.footer-top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.logo-footer {
|
||
width: 2.4rem;
|
||
height: .8rem;
|
||
margin-bottom: 0.4rem;
|
||
border-radius: 0.12rem;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.footer-center {
|
||
font-size: 0.24rem;
|
||
padding: 0.3rem 0.2rem;
|
||
background: #fff;
|
||
border-radius: 0.16rem;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
border: 1px solid #eef2f9;
|
||
width: 100%;
|
||
|
||
@media (min-width: 768px) {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.3rem 0.6rem;
|
||
}
|
||
|
||
.center {
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 0.16rem 0.2rem;
|
||
border-radius: 0.12rem;
|
||
|
||
.iconfont {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
margin-right: 0.12rem;
|
||
margin-top: 0.02rem;
|
||
color: #275AFF;
|
||
flex-shrink: 0;
|
||
font-size: 0.26rem;
|
||
}
|
||
|
||
.label {
|
||
color: #666;
|
||
flex-shrink: 0;
|
||
font-weight: 500;
|
||
margin-right: 0.08rem;
|
||
font-size: 0.24rem;
|
||
}
|
||
|
||
.value {
|
||
color: #444;
|
||
flex: 1;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.phone-numbers {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.08rem;
|
||
|
||
@media (min-width: 768px) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
}
|
||
}
|
||
|
||
.phone-link {
|
||
color: #333;
|
||
text-decoration: none;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
font-size: 0.208rem;
|
||
|
||
&:hover {
|
||
color: #275AFF;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.phone-separator {
|
||
color: #999;
|
||
font-weight: 300;
|
||
|
||
@media (max-width: 768px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.email-link {
|
||
color: #275AFF;
|
||
text-decoration: none;
|
||
word-break: break-all;
|
||
font-weight: 500;
|
||
font-size: 0.208rem;
|
||
|
||
&:hover {
|
||
color: #2ebdfa;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 移动端二维码 */
|
||
.mobile-qr {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin-top: 0.4rem;
|
||
|
||
@media (min-width: 768px) {
|
||
display: none;
|
||
}
|
||
|
||
.qr-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 0.16rem;
|
||
padding: 0.24rem;
|
||
box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
|
||
border: 1px solid #eef2f9;
|
||
width: 100%;
|
||
max-width: 2.4rem;
|
||
margin-right: 0.4rem;
|
||
|
||
.qr-code {
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
background: #fff;
|
||
border-radius: 0.12rem;
|
||
padding: 0.12rem;
|
||
border: 1px solid #eef2f9;
|
||
margin-bottom: 0.16rem;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 0.04rem;
|
||
}
|
||
}
|
||
|
||
.qr-desc {
|
||
color: #333;
|
||
font-size: 0.208rem;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 底部信息区域 */
|
||
.footer-bottom {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 0.3rem 0.2rem;
|
||
background: #fff;
|
||
border-radius: 0.16rem;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
margin-top: 0.4rem;
|
||
border: 1px solid #eef2f9;
|
||
|
||
@media (min-width: 768px) {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
text-align: left;
|
||
padding: 0.3rem 0.4rem;
|
||
}
|
||
}
|
||
|
||
.icp-info {
|
||
margin-bottom: 0.24rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
@media (min-width: 768px) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.icp-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.08rem;
|
||
margin-bottom: 0.12rem;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.icp-text {
|
||
color: #888;
|
||
font-size: 0.24rem;
|
||
}
|
||
|
||
.icp-number {
|
||
color: #444;
|
||
font-weight: 500;
|
||
font-size: 0.24rem;
|
||
}
|
||
}
|
||
|
||
.copyright {
|
||
color: #888;
|
||
font-size: 0.24rem;
|
||
font-weight: 300;
|
||
}
|
||
}
|
||
|
||
.record-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
margin-bottom: 0.24rem;
|
||
|
||
@media (min-width: 768px) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.police-record {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.1rem;
|
||
padding: 0.08rem 0.16rem;
|
||
background: #f9fafc;
|
||
border-radius: 0.24rem;
|
||
transition: all 0.3s;
|
||
border: 1px solid #eef2f9;
|
||
|
||
&:hover {
|
||
background: #f0f5ff;
|
||
border-color: #275AFF;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.police-icon {
|
||
width: 0.18rem;
|
||
height: 0.18rem;
|
||
}
|
||
|
||
.police-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 0.24rem;
|
||
|
||
&:hover {
|
||
color: #275AFF;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
.license-record {
|
||
.license-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 0.24rem;
|
||
padding: 0.08rem 0.16rem;
|
||
background: #f9fafc;
|
||
border-radius: 0.24rem;
|
||
transition: all 0.3s;
|
||
border: 1px solid #eef2f9;
|
||
|
||
&:hover {
|
||
background: #f0f5ff;
|
||
color: #275AFF;
|
||
text-decoration: underline;
|
||
transform: translateY(-2px);
|
||
border-color: #275AFF;
|
||
}
|
||
}
|
||
}
|
||
</style>
|