fix：维保页面调整
parent
b7067082ed
commit
feb99bb10e
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
|
|
@ -2,6 +2,7 @@
|
|||
<div class="service-page">
|
||||
<header class="service-header">
|
||||
<div class="service-header__inner">
|
||||
<img :src="h3cLogoSrc" alt="H3C" class="service-logo">
|
||||
<img :src="logoSrc" alt="紫光汇智" class="service-logo">
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -200,10 +201,19 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-follow">
|
||||
<h3 class="footer-follow__title">关注汇智</h3>
|
||||
<div class="footer-qr-card" aria-label="关注汇智二维码">
|
||||
<img :src="qrCodeSrc" alt="关注汇智二维码" class="footer-qr-image">
|
||||
<div class="footer-follow-group">
|
||||
<div class="footer-follow">
|
||||
<h3 class="footer-follow__title">关注汇智</h3>
|
||||
<div class="footer-qr-card" aria-label="关注汇智二维码">
|
||||
<img :src="qrCodeSrc" alt="关注汇智二维码" class="footer-qr-image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-follow">
|
||||
<h3 class="footer-follow__title">关注新华三</h3>
|
||||
<div class="footer-qr-card" aria-label="关注新华三二维码">
|
||||
<img :src="h3cQrCodeSrc" alt="关注新华三二维码" class="footer-qr-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -218,7 +228,9 @@
|
|||
<script>
|
||||
import { getProductInfo, getOrderInfo, getWarrantyInfo } from '@/api/manage/service'
|
||||
import logoImage from '@/assets/images/companyLogoHD.png'
|
||||
import h3cLogoImage from '@/assets/images/h3cLogo.png'
|
||||
import companyQrCodeImage from '@/assets/images/company-QR-code.png'
|
||||
import companyH3cQrCodeImage from '@/assets/images/H3C-QR-code.png'
|
||||
|
||||
const statusItems = [
|
||||
{
|
||||
|
|
@ -260,8 +272,10 @@ export default {
|
|||
name: 'ServiceQuery',
|
||||
data() {
|
||||
return {
|
||||
h3cLogoSrc: h3cLogoImage,
|
||||
logoSrc: logoImage,
|
||||
qrCodeSrc: companyQrCodeImage,
|
||||
h3cQrCodeSrc: companyH3cQrCodeImage,
|
||||
queryMode: 'single',
|
||||
serialNumber: '',
|
||||
batchSerialNumbers: '',
|
||||
|
|
@ -527,11 +541,16 @@ export default {
|
|||
}
|
||||
|
||||
.service-header__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
|
||||
.service-logo {
|
||||
width: 124px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -1024,43 +1043,63 @@ export default {
|
|||
}
|
||||
|
||||
.service-footer {
|
||||
background: #2f2c2c;
|
||||
margin-top: 48px;
|
||||
background: linear-gradient(180deg, #2f2c2c 0%, #252222 100%);
|
||||
}
|
||||
|
||||
.service-footer__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.9fr);
|
||||
gap: 44px;
|
||||
padding: 36px 24px 32px;
|
||||
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
|
||||
gap: 34px 28px;
|
||||
padding: 40px 24px 34px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
max-width: 560px;
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 132px;
|
||||
width: 142px;
|
||||
display: block;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.footer-brand__desc {
|
||||
margin: 28px 0 0;
|
||||
line-height: 1.95;
|
||||
margin: 20px 0 0;
|
||||
line-height: 1.9;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.footer-follow-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(128px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-follow {
|
||||
padding: 16px 14px 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-follow__title {
|
||||
margin: 4px 0 28px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer-qr-card {
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -1134,11 +1173,11 @@ export default {
|
|||
}
|
||||
|
||||
.service-footer__bottom {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 14px 24px 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.28);
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
|
@ -1210,7 +1249,7 @@ export default {
|
|||
}
|
||||
|
||||
.service-footer__inner {
|
||||
gap: 28px;
|
||||
gap: 22px;
|
||||
padding: 30px 16px 24px;
|
||||
}
|
||||
|
||||
|
|
@ -1218,10 +1257,14 @@ export default {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-follow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.footer-follow-group {
|
||||
grid-template-columns: repeat(2, minmax(130px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.footer-follow-group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue