Merge branch 'dev'
This commit is contained in:
@@ -107,13 +107,6 @@ abstract class Common extends BaseController
|
||||
'status' => 1
|
||||
])
|
||||
->where('status', '=', 1)
|
||||
->where(function($query) {
|
||||
// 临时代码，移动端暂时不显示 "AI PC"
|
||||
if (request()->from == 'mobile') {
|
||||
$table_name = SysNavigationItemModel::getTable();
|
||||
$query->whereNotIn($table_name . ".id", [77, 78]);
|
||||
}
|
||||
})
|
||||
->order(['sort' => 'asc', 'id' => 'asc'])
|
||||
->select();
|
||||
if ($nav->isEmpty()) {
|
||||
|
||||
@@ -5,7 +5,6 @@ namespace app\index\controller;
|
||||
|
||||
use app\index\model\SysBannerModel;
|
||||
use think\facade\View;
|
||||
use think\Request;
|
||||
|
||||
class TopicLaptop extends Common
|
||||
{
|
||||
@@ -96,7 +95,7 @@ class TopicLaptop extends Common
|
||||
// 产品检测介绍
|
||||
$data['product_testing'] = data_get($banners_map, 'BANNER_693a2ff4629bd')?->items->toArray();
|
||||
// 网页脚注
|
||||
$data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray();
|
||||
$data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray();
|
||||
}
|
||||
View::assign('data', $data);
|
||||
|
||||
|
||||
@@ -92,9 +92,9 @@ return [
|
||||
],
|
||||
'attachment/video' => [
|
||||
'软件和驱动程序' => 'Software and Drivers',
|
||||
'您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.',
|
||||
'您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.',
|
||||
],
|
||||
|
||||
|
||||
// 联系我们批量购买页面
|
||||
'contactus/bulkbuy' => [
|
||||
'批量购买' => 'Bulk Buy',
|
||||
@@ -219,4 +219,21 @@ return [
|
||||
'联系我们' => 'Contact US',
|
||||
'目录' => 'Content'
|
||||
],
|
||||
];
|
||||
|
||||
// 笔记本专题 - 首页
|
||||
'topiclaptop/index' => [
|
||||
'CineBench R23 多核跑分' => 'Outperforms Ryzen 5 & Intel i5',
|
||||
'*此跑分为ORICO实验室测定所得，请以实际使用为准' => '*Data measured by ORICO Lab. Actual performance may vary.',
|
||||
'3DMARK Time Spy显卡得分' => 'Handles Office & Gaming with Ease',
|
||||
'肯辛通锁孔' => 'Kensington <br/> Lock Slot',
|
||||
'千兆网口' => 'Gigabit <br/> Ethernet',
|
||||
'USB-A<br/>(5Gbps)' => 'USB-A <br/> (5Gbps)',
|
||||
'3.5mm<br/>耳麦合一' => '3.5mm <br/> Combo Audio',
|
||||
'TF口3.0' => 'TF 3.0 <br/> Card Slot',
|
||||
'全功能<br/>USB-C' => 'All-in-One <br/> USB-C',
|
||||
"接口大满贯" => "Full-Featured Ports",
|
||||
"酷睿i5-12450H" => "Core i5-12450H",
|
||||
"锐龙9 6900HX" => "Ryzen9 6900HX",
|
||||
"标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定" => "Versatile Ports for Easy Connectivity. Effortlessly</br> link to projectors, U disks, TF cards, and more.",
|
||||
],
|
||||
];
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -18,7 +18,6 @@
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/ips.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/rgb.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/qb.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/xh.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/jk.css">
|
||||
@@ -59,7 +58,7 @@
|
||||
<div class="swiper-slide auto-swiper-slide">
|
||||
<div class="swiper-container-texts" style="color:#fff">
|
||||
<div class="swiper-container-texts-t">{$tfi.title}</div>
|
||||
<div class="swiper-container-texts-p">{$tfi.desc||raw|htmlspecialchars_decode}</div>
|
||||
<div class="swiper-container-texts-p">{$tfi.desc|raw|htmlspecialchars_decode}</div>
|
||||
<div class="swiper-container-texts-img">
|
||||
<a href="{$tfi.link}">
|
||||
<img src="{$tfi.extra_image}" alt="" >
|
||||
|
||||
40
public/static/index/mobile/css/topic_laptop/amd.css
Normal file
40
public/static/index/mobile/css/topic_laptop/amd.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.amd-box {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
max-width: 6.82rem;
|
||||
margin: 0 auto;
|
||||
margin-top: -0.86rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.amd-img-header,
|
||||
.amd-img-main,
|
||||
.amd-img-footer {
|
||||
width: 100%;
|
||||
max-width: 6.82rem;
|
||||
}
|
||||
.amd-img-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.amd-img-main-left,
|
||||
.amd-img-main-right {
|
||||
flex: 1;
|
||||
max-width: 3.36rem;
|
||||
display: block;
|
||||
}
|
||||
.amd-img-main-left img,
|
||||
.amd-img-main-right img {
|
||||
width: 3.36rem;
|
||||
display: block;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.amd-img-header img {
|
||||
width: 6.82rem;
|
||||
display: block;
|
||||
}
|
||||
.amd-img-footer img {
|
||||
width: 6.82rem;
|
||||
margin-top: 0.1rem;
|
||||
display: block;
|
||||
}
|
||||
50
public/static/index/mobile/css/topic_laptop/bly.css
Normal file
50
public/static/index/mobile/css/topic_laptop/bly.css
Normal file
@@ -0,0 +1,50 @@
|
||||
.bly {
|
||||
margin: 0 0.34rem;
|
||||
aspect-ratio: 682/338;
|
||||
/* max-height: 6.97rem; */
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.bly .ba-slider .handle:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
/* 1. 缩小宽高：从48px改为32px（可根据需求再调，比如28px/30px） */
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
/* 2. 同步调整margin：宽高的一半，保证居中（48px对应-24px，32px对应-16px） */
|
||||
margin: -0.16rem 0 0 -0.16rem;
|
||||
content: '';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff
|
||||
url('https://dev.ow.f2b211.com/static/index/pc/images/ba-arrow.png')
|
||||
/* 3. 缩小背景箭头：从22px改为16px（匹配整体尺寸） */ center center /
|
||||
0.16rem 0.16rem no-repeat;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(1);
|
||||
z-index: 5;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bly .ba-slider .handle.ba-draggable:after {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.bly-t {
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.bly-p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-top: 0.37rem;
|
||||
padding-bottom: 0.56rem;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
line-height: 1.5;
|
||||
}
|
||||
50
public/static/index/mobile/css/topic_laptop/cpu.css
Normal file
50
public/static/index/mobile/css/topic_laptop/cpu.css
Normal file
@@ -0,0 +1,50 @@
|
||||
.cpu {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
aspect-ratio: 750/882;
|
||||
position: relative;
|
||||
}
|
||||
.cpu-main {
|
||||
width: 100%;
|
||||
aspect-ratio: 750/882;
|
||||
}
|
||||
.cpu-texts-t {
|
||||
color: #fff;
|
||||
font-size: 0.48rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
padding-top: 0.19rem;
|
||||
}
|
||||
.cpu-texts-p {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.20rem;
|
||||
margin-top: 0.37rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cpu-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.cpu-footer-img {
|
||||
display: flex;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.cpu-footer img {
|
||||
width: 100%;
|
||||
max-width: 1.48rem;
|
||||
display: block;
|
||||
}
|
||||
.cpu-footer-desc {
|
||||
font-size: 0.16rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
margin-top: 0.38rem;
|
||||
margin-bottom: 0.51rem;
|
||||
width: 100%;
|
||||
}
|
||||
59
public/static/index/mobile/css/topic_laptop/endurance.css
Normal file
59
public/static/index/mobile/css/topic_laptop/endurance.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.endurance {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 1.78rem;
|
||||
aspect-ratio: 750/778;
|
||||
}
|
||||
.endurance-texts {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -0.4rem;
|
||||
}
|
||||
.endurance-t {
|
||||
width: 100%;
|
||||
font-size: 0.5rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.endurance-t span:nth-child(1) {
|
||||
font-size: 0.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.endurance-t span:nth-child(2) {
|
||||
font-size: 0.48rem;
|
||||
margin-left: 0.11rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.endurance-p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.37rem;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
}
|
||||
.endurance-img {
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0.62rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.endurance-img img {
|
||||
width: 2.46rem;
|
||||
display: block;
|
||||
}
|
||||
.endurance-footer-p {
|
||||
color: #ffffff;
|
||||
font-size: 0.18rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
161
public/static/index/mobile/css/topic_laptop/footer.css
Normal file
161
public/static/index/mobile/css/topic_laptop/footer.css
Normal file
@@ -0,0 +1,161 @@
|
||||
.footer-imgs {
|
||||
width: 6.8rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-imgs img {
|
||||
width: 2.22rem;
|
||||
}
|
||||
.footer-imgs img:nth-child(4),
|
||||
.footer-imgs img:nth-child(5),
|
||||
.footer-imgs img:nth-child(6) {
|
||||
margin-top: 0.09rem;
|
||||
}
|
||||
|
||||
.footer-texts {
|
||||
width: 6.8rem;
|
||||
margin: 1.5rem 0.35rem;
|
||||
/* font-size: 0.16rem; */
|
||||
color: #909399;
|
||||
/* white-space: normal; */
|
||||
/* margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footer-texts p {
|
||||
width: 6.8rem;
|
||||
font-size: 0.16rem;
|
||||
padding-left: 0.1rem;
|
||||
text-indent: -0.2rem;
|
||||
/* line-height: 1.5;
|
||||
margin-bottom: 0.1rem; */
|
||||
font-family: 'HarmonyOS-Light';
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
.footer-texts-en {
|
||||
width: 6.8rem;
|
||||
margin: 1.5rem 0.35rem;
|
||||
/* font-size: 0.16rem; */
|
||||
color: #909399;
|
||||
/* white-space: normal; */
|
||||
/* margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footer-texts-en p {
|
||||
width: 6.8rem;
|
||||
font-size: 0.16rem;
|
||||
padding-left: 0.1rem;
|
||||
text-indent: -0.1rem;
|
||||
/* line-height: 1.5;
|
||||
margin-bottom: 0.1rem; */
|
||||
font-family: 'HarmonyOS-Light';
|
||||
/* letter-spacing: 1px; */
|
||||
}
|
||||
|
||||
|
||||
.oircoEgapp-foot .logo-white img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.oircoEgapp-foot .m_footer {
|
||||
display: flex;
|
||||
/* flex-direction: row; */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin:0 4%;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
/* .oircoEgapp-foot .m_footer .left,
|
||||
.oircoEgapp-foot .foot-con {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
} */
|
||||
.oircoEgapp-foot .m_footer .right {
|
||||
flex:1;
|
||||
width: 50% !important;
|
||||
display: flex !important;
|
||||
justify-content: end !important;
|
||||
/* max-width: 55%; */
|
||||
}
|
||||
.oircoEgapp-foot .m_footer .left {
|
||||
flex:1 !important;
|
||||
/* max-width: 40%;
|
||||
justify-content: end;
|
||||
margin-right: 4%; */
|
||||
width: 50% !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.oircoEgapp-foot .foot-con span {
|
||||
width: auto;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
.oircoEgapp-foot .foot-cate .clearfix li h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.oircoEgapp-foot .foot-cate .clearfix li p,
|
||||
.oircoEgapp-foot .foot-cate .clearfix li p a {
|
||||
font-size: 12px;
|
||||
}
|
||||
.logo-white {
|
||||
text-align: center;
|
||||
padding: 1rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.foot-cate {
|
||||
padding: 0.16rem;
|
||||
}
|
||||
.foot-cate h3 {
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
.foot-cate li {
|
||||
padding: 0.16rem 0;
|
||||
min-height: 276px;
|
||||
|
||||
}
|
||||
.foot-cate li p {
|
||||
line-height: 40px;
|
||||
}
|
||||
.m_footer .right {
|
||||
float: right;
|
||||
width: 57%;
|
||||
text-align: left;
|
||||
}
|
||||
.foot-con span {
|
||||
font-size:14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
font-family: 'HarmonyOS-Medium';
|
||||
}
|
||||
.oircoEgapp-foot .foot-con span {
|
||||
width: auto;
|
||||
padding: 0 0.125rem;
|
||||
}
|
||||
.m_footer .left a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.m_footer .left img {
|
||||
width: 30px;
|
||||
padding-right:0 !important;
|
||||
padding-top: 0;
|
||||
}
|
||||
/* .oircoEgapp-foot .m_footer .right {
|
||||
max-width: 50%;
|
||||
} */
|
||||
.m_footer .right {
|
||||
padding: 0 !important;
|
||||
}
|
||||
69
public/static/index/mobile/css/topic_laptop/fs.css
Normal file
69
public/static/index/mobile/css/topic_laptop/fs.css
Normal file
@@ -0,0 +1,69 @@
|
||||
.fs {
|
||||
width: 100%;
|
||||
}
|
||||
.fs-box {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
.fs-img,
|
||||
.fs-video {
|
||||
backface-visibility: hidden; /* 开启硬件加速 */
|
||||
transform: translateZ(0); /* 硬件加速 */
|
||||
}
|
||||
.fs-box img {
|
||||
width: 100%;
|
||||
}
|
||||
.fs-box-img {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fs-h-img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.11rem;
|
||||
|
||||
}
|
||||
.fs-h-img img {
|
||||
width: 3.35rem;
|
||||
aspect-ratio: 335/95;
|
||||
|
||||
}
|
||||
.fs-b-img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.1rem;
|
||||
aspect-ratio: 681/122;
|
||||
}
|
||||
.fs-b-img img {
|
||||
width: 6.81rem;
|
||||
}
|
||||
.fs-ts {
|
||||
font-size: 0.18rem;
|
||||
text-align: center;
|
||||
color: #cbcfd8;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.dl {
|
||||
width: 100%;
|
||||
padding-top: 1.01rem;
|
||||
}
|
||||
.dl-t {
|
||||
color: #fff;
|
||||
font-size: 0.48rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.dl-p {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.20rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 0.37rem;
|
||||
/* padding-bottom: 0.37rem; */
|
||||
line-height: 1.5;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
}
|
||||
44
public/static/index/mobile/css/topic_laptop/gpu.css
Normal file
44
public/static/index/mobile/css/topic_laptop/gpu.css
Normal file
@@ -0,0 +1,44 @@
|
||||
.gpu {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.gpu-texts {
|
||||
color: #fff;
|
||||
font-size: 0.48rem;
|
||||
margin: 0 0.34rem;
|
||||
}
|
||||
.gpu-texts-t {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.gpu-texts-p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
line-height: 1.5;
|
||||
margin-top: 0.37rem;
|
||||
}
|
||||
.gpu-main-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 750/780;
|
||||
}
|
||||
.gpu-amd-img {
|
||||
width: 100%;
|
||||
}
|
||||
.gpu-amd-img img {
|
||||
max-width: 2.26rem;
|
||||
width: 100%;
|
||||
margin-top: 2.39rem;
|
||||
margin-left: 0.45rem;
|
||||
}
|
||||
.gpu-footer-imgs {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0.61rem;
|
||||
gap: 0.1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.gpu-footer-imgs img {
|
||||
max-width: 1.63rem;
|
||||
}
|
||||
233
public/static/index/mobile/css/topic_laptop/header.css
Normal file
233
public/static/index/mobile/css/topic_laptop/header.css
Normal file
@@ -0,0 +1,233 @@
|
||||
.oircoEgapp-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.oircoEgapp-head .headtop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.16rem;
|
||||
height:60px;
|
||||
background: #fff;
|
||||
}
|
||||
.oircoEgapp-head .headtop .headerlogimg {
|
||||
|
||||
max-width: 140px;
|
||||
min-width: 123px;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
/* height: 2.25rem; */
|
||||
}
|
||||
.oircoEgapp-head .top-menu {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
display: none;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct {
|
||||
font-family: "HarmonyOS-SemiBold";
|
||||
font-weight: bold;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1 {
|
||||
padding: 0.16rem 3.5% 0.2rem;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1.5%;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-more i {
|
||||
font-weight: bold;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-2 {
|
||||
padding-left: 0.16rem;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
font-weight: 100;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-2 a {
|
||||
color: #666;
|
||||
}
|
||||
.cursor_p span {
|
||||
font-size: 22px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
width: 100%;
|
||||
/* height: 1.2rem; */
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
.cursor_p span:hover {
|
||||
font-size:22px;
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
overflow: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* .cursor_p {
|
||||
height: 0.38rem !important;
|
||||
} */
|
||||
.img-responsive {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.img-responsive span {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.action-sheet {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
display: none;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 11111;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
text-indent: 0.2rem;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
.action-sheet ul li {
|
||||
margin: 0 10px;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.action-sheet ul li a {
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.action-sheet ul li img {
|
||||
margin-right: 14px;
|
||||
}
|
||||
.menu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius:6px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.close-icon {
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.close-icon img {
|
||||
width: 24px !important;
|
||||
}
|
||||
.title-text {
|
||||
padding-top: 0.24rem;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
.title-text p {
|
||||
line-height: 2;
|
||||
}
|
||||
.title-text p a {
|
||||
color: #989898;
|
||||
|
||||
}
|
||||
.title-text p a:hover {
|
||||
color: #989898;
|
||||
}
|
||||
.marsk-container {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.marsk-container-detail {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.search-in {
|
||||
margin-top:0.8rem;
|
||||
}
|
||||
.search-in input {
|
||||
width: 70% !important;
|
||||
height: 0.8rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d6d6d6;
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #989898;
|
||||
}
|
||||
.search-button {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
background: #0060ff;
|
||||
height:0.7rem;
|
||||
border-radius: 20px;
|
||||
padding: 0 14px;
|
||||
width: 22%;
|
||||
}
|
||||
.search-in form{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.search-in .title-text p a{
|
||||
font-size: 14px;
|
||||
}
|
||||
/*头部搜索弹窗*/
|
||||
.popup-quick {
|
||||
width: 86%;
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.2);
|
||||
color: #333;
|
||||
padding: 14px;
|
||||
border-radius: 5px;
|
||||
margin: 14px auto 0;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
42
public/static/index/mobile/css/topic_laptop/index.css
Normal file
42
public/static/index/mobile/css/topic_laptop/index.css
Normal file
@@ -0,0 +1,42 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
width: 100% !important;
|
||||
overflow-x: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
overflow-x: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
.f36{
|
||||
font-size: 0.36rem !important;
|
||||
font-family: "HarmonyOS-Medium" !important;
|
||||
/* line-height: 1 !important; */
|
||||
}
|
||||
.f18{
|
||||
font-size: 0.18rem !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
.lh1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
.f28 {
|
||||
font-size: 0.28rem !important;
|
||||
font-family: "HarmonyOS-Medium" !important;
|
||||
}
|
||||
.f48 {
|
||||
font-size: 0.48rem !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.6rem !important;
|
||||
font-family: "HarmonyOS-Medium" !important;
|
||||
}
|
||||
43
public/static/index/mobile/css/topic_laptop/ips.css
Normal file
43
public/static/index/mobile/css/topic_laptop/ips.css
Normal file
@@ -0,0 +1,43 @@
|
||||
.ips {
|
||||
position: relative;
|
||||
}
|
||||
.ips-t {
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
margin-top: 1.5rem;
|
||||
margin-left: 0.38rem;
|
||||
margin-right: 0.38rem;
|
||||
margin-bottom: 0.46rem;
|
||||
}
|
||||
.ips-bg {
|
||||
aspect-ratio: 750/678;
|
||||
position: relative;
|
||||
}
|
||||
.ips-bg p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
line-height: 1.5;
|
||||
margin-left: 0.38rem;
|
||||
margin-right: 0.38rem;
|
||||
position: absolute;
|
||||
top: -0.3rem;
|
||||
}
|
||||
.ips-imgs {
|
||||
width: 6.8rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.1rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -3rem;
|
||||
display: flex;
|
||||
}
|
||||
.ips-imgs img {
|
||||
width: 3.35rem;
|
||||
display: block;
|
||||
}
|
||||
/* .ips-imgs img:nth-child(3),
|
||||
.ips-imgs img:nth-child(4) {
|
||||
margin-top: 0.1rem;
|
||||
} */
|
||||
37
public/static/index/mobile/css/topic_laptop/m2.css
Normal file
37
public/static/index/mobile/css/topic_laptop/m2.css
Normal file
@@ -0,0 +1,37 @@
|
||||
.m2 {
|
||||
width: 100%;
|
||||
margin-top: 1.09rem;
|
||||
}
|
||||
.m2-bg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 750/846;
|
||||
}
|
||||
|
||||
.m2-bg-t1 {
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
padding-top: 1.3rem;
|
||||
}
|
||||
.m2-bg-p {
|
||||
color: #CBCFD8ff;
|
||||
font-size: 0.18rem;
|
||||
padding-top:0.37rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.m2-img-box {
|
||||
position: absolute;
|
||||
bottom: 0.66rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.11rem;
|
||||
}
|
||||
.m2-img-box img {
|
||||
width: 2.22rem;
|
||||
}
|
||||
39
public/static/index/mobile/css/topic_laptop/memory.css
Normal file
39
public/static/index/mobile/css/topic_laptop/memory.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.memory {
|
||||
width: 100%;
|
||||
}
|
||||
.memory-t {
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-bottom: 0.37rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.memory-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 750/727;
|
||||
position: relative;
|
||||
}
|
||||
.memory-p {
|
||||
width: 100%;
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.memory-footer-img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -0.74rem;
|
||||
width: 6.83rem;
|
||||
}
|
||||
.memory-footer-img p {
|
||||
height:0;
|
||||
}
|
||||
.memory-footer-img img {
|
||||
width: 6.83rem;
|
||||
|
||||
display: block;
|
||||
aspect-ratio: 683/148;
|
||||
}
|
||||
129
public/static/index/mobile/css/topic_laptop/progress.css
Normal file
129
public/static/index/mobile/css/topic_laptop/progress.css
Normal file
@@ -0,0 +1,129 @@
|
||||
.progress {
|
||||
margin-left: 0.34rem;
|
||||
margin-right: 0.34rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* .progress-section {
|
||||
margin-left: 0.34rem;
|
||||
margin-right: 0.34rem;
|
||||
box-sizing: border-box;
|
||||
} */
|
||||
|
||||
.progress-title {
|
||||
font-size: 0.24rem;
|
||||
color: #fff;
|
||||
padding: 0.16rem 0 0.36rem 0;
|
||||
font-family: 'HarmonyOS-Medium';
|
||||
}
|
||||
.progress-item .label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
line-height: 1;
|
||||
margin-top: 0.13rem;
|
||||
margin-bottom: 0.36rem;
|
||||
}
|
||||
|
||||
.progress-item .label .device-name {
|
||||
flex: 1;
|
||||
font-family: 'HarmonyOS-Medium';
|
||||
margin-left: 0.04rem;
|
||||
}
|
||||
|
||||
.progress-item .label .value {
|
||||
text-align: right;
|
||||
font-family: 'HarmonyOS-Medium';
|
||||
margin-right: 0.04rem;
|
||||
}
|
||||
|
||||
.colorLinearGradient {
|
||||
background: linear-gradient(90deg, #7e51ff, #d5dfff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.progress-item .label .value.m4-max {
|
||||
color: #5e5ce6;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 0.1rem;
|
||||
max-height: 0.2rem;
|
||||
min-height: 0.1rem;
|
||||
border-radius: 0.1rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
/* 性能优化1：开启硬件加速，减少重绘 */
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 0.05rem;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 1.2s ease-out;
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 保留你所有原始的进度条颜色类 */
|
||||
.progress-fill.m4-max {
|
||||
background: linear-gradient(40deg, #7e51ff, #e1d5ff);
|
||||
}
|
||||
|
||||
.progress-fill.m2-max {
|
||||
background: #bfc5d9;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
left: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.font20 {
|
||||
font-size: 0.2rem !important;
|
||||
}
|
||||
.font18 {
|
||||
font-size: 0.18rem !important;
|
||||
}
|
||||
.colorCBCFD8 {
|
||||
color: #646778 !important;
|
||||
}
|
||||
|
||||
.progress-p {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.18rem;
|
||||
margin-top: 0.51rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-p1 {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.18rem;
|
||||
margin-top: 1.56rem;
|
||||
text-align: center;
|
||||
}
|
||||
.w645 {
|
||||
width: 6.45rem;
|
||||
}
|
||||
.w585 {
|
||||
width: 5.85rem;
|
||||
}
|
||||
.w454 {
|
||||
width: 4.54rem;
|
||||
}
|
||||
.w321 {
|
||||
width: 3.21rem;
|
||||
}
|
||||
.w596 {
|
||||
width: 5.96rem;
|
||||
}
|
||||
.w467 {
|
||||
width: 4.67rem;
|
||||
}
|
||||
25
public/static/index/mobile/css/topic_laptop/qb.css
Normal file
25
public/static/index/mobile/css/topic_laptop/qb.css
Normal file
@@ -0,0 +1,25 @@
|
||||
/* .qb {
|
||||
position: absolute;
|
||||
top:3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
} */
|
||||
.qb-t {
|
||||
width: 100%;
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
.qb-p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.37rem;
|
||||
padding-bottom: 0.34rem;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
line-height: 1.5;
|
||||
}
|
||||
.qb-bg-img1 {
|
||||
width: 6.9rem;
|
||||
}
|
||||
28
public/static/index/mobile/css/topic_laptop/rgb.css
Normal file
28
public/static/index/mobile/css/topic_laptop/rgb.css
Normal file
@@ -0,0 +1,28 @@
|
||||
.rgb-t {
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 4.84rem;
|
||||
margin-bottom: 0.37rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.rgb-bg {
|
||||
aspect-ratio: 750/582;
|
||||
}
|
||||
.rgb-p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
.rgb-imgs {
|
||||
display: flex;
|
||||
gap: 0.1rem;
|
||||
margin-top: 0.28rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.rgb-imgs img {
|
||||
width: 2.17rem;
|
||||
display: block;
|
||||
}
|
||||
86
public/static/index/mobile/css/topic_laptop/swiper.css
Normal file
86
public/static/index/mobile/css/topic_laptop/swiper.css
Normal file
@@ -0,0 +1,86 @@
|
||||
/* 轮播容器 - 核心：基于视口高度自适应 */
|
||||
.auto-swiper-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 轮播项 - 填充容器高度 */
|
||||
.auto-swiper-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 图片自适应核心：填充屏幕比例高度，保持比例 */
|
||||
.auto-swiper-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 优先填充容器，裁剪超出部分（无拉伸） */
|
||||
/* object-fit: contain; 可选：完整显示图片，不裁剪（可能留黑边） */
|
||||
display: block;
|
||||
}
|
||||
.swiper-container-texts {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 1.2rem;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-container-texts-t {
|
||||
font-size: 0.48rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
}
|
||||
.swiper-container-texts-p {
|
||||
padding-top: 0.54rem;
|
||||
font-size: 0.16rem;
|
||||
/* text-align: center; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* letter-spacing: px; */
|
||||
justify-content: center;
|
||||
}
|
||||
.swiper-container-texts-p div {
|
||||
font-family: 'HarmonyOS-Light';
|
||||
}
|
||||
.swiper-container-texts-line {
|
||||
width: 1px;
|
||||
height: 0.16rem;
|
||||
background: #fff;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.swiper-container-texts-img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 0.54rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.swiper-container-texts-img a {
|
||||
width: 100%;
|
||||
max-width: 1.18rem;
|
||||
}
|
||||
.swiper-container-texts-img img {
|
||||
width: 100%;
|
||||
max-width: 1.18rem;
|
||||
}
|
||||
.swiper-slide-t {
|
||||
padding-top: 0.3rem;
|
||||
font-size: 0.2rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.swiper-slide-p {
|
||||
font-size: 0.16rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
margin-top: 0.18rem;
|
||||
}
|
||||
105
public/static/index/mobile/css/topic_laptop/tabs.css
Normal file
105
public/static/index/mobile/css/topic_laptop/tabs.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.tabs-container {
|
||||
width: 6.03rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tabs-header-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.48rem;
|
||||
}
|
||||
.tabs-header {
|
||||
display: inline-flex;
|
||||
/* 改为inline-flex，宽度由子元素决定 */
|
||||
position: relative;
|
||||
border-bottom: 1px solid #909399;
|
||||
margin: 0 auto;
|
||||
width: 1.75rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
/* padding: 12px 24px; */
|
||||
font-size: 0.18rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
color: #cbcfd8;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height:1px;
|
||||
background-color: #fff;
|
||||
transform: translateX(0);
|
||||
width: auto;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
will-change: transform, width;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
width: 6.03rem;
|
||||
width: 6.03rem;
|
||||
/* min-width: 1280px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tabs-p {
|
||||
width: 100%;
|
||||
font-size: 0.18rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
margin-top: 0.48rem;
|
||||
display: none;
|
||||
}
|
||||
.tabs-p.active {
|
||||
display: block;
|
||||
}
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
.tab-panel-img {
|
||||
background: #1c1c1e;
|
||||
width: 5.77rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0.16rem;
|
||||
}
|
||||
.tab-panel-img img {
|
||||
width: 5.77rem;
|
||||
}
|
||||
.tab-panel.active {
|
||||
display: block;
|
||||
}
|
||||
.tab-t {
|
||||
font-size: 0.48rem;
|
||||
color: #cbcfd8;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.7rem;
|
||||
display: none;
|
||||
}
|
||||
.tab-t.active {
|
||||
display: block;
|
||||
}
|
||||
/* .tab-ts {
|
||||
margin-top: 2.97rem;
|
||||
margin-bottom: 1rem;
|
||||
} */
|
||||
37
public/static/index/mobile/css/topic_laptop/wift.css
Normal file
37
public/static/index/mobile/css/topic_laptop/wift.css
Normal file
@@ -0,0 +1,37 @@
|
||||
.wifi {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 750/595;
|
||||
margin-top: 3.45rem;
|
||||
}
|
||||
.wifi-texts {
|
||||
position: absolute;
|
||||
top: -2.3rem;
|
||||
left: 0.42rem;
|
||||
width: 100%;
|
||||
}
|
||||
.wifi-t {
|
||||
width: 100%;
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wifi-p {
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
padding-top: 0.37rem;
|
||||
line-height: 1.4;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
}
|
||||
.wifi-img {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -0.22rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.wifi-img img {
|
||||
width: 3.35rem;
|
||||
display: block;
|
||||
}
|
||||
9
public/static/index/mobile/css/topic_laptop/window.css
Normal file
9
public/static/index/mobile/css/topic_laptop/window.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.window {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.window img {
|
||||
width: 6.8rem;
|
||||
}
|
||||
64
public/static/index/mobile/css/topic_laptop/xn.css
Normal file
64
public/static/index/mobile/css/topic_laptop/xn.css
Normal file
@@ -0,0 +1,64 @@
|
||||
.xn-container {
|
||||
width: 6.8rem;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 图片容器样式（核心） */
|
||||
.xn-image-section {
|
||||
overflow: hidden;
|
||||
border-radius: 0.16rem;
|
||||
background: #0d0c10;
|
||||
border: 1px solid #3f3f45;
|
||||
width: 6.8rem;
|
||||
}
|
||||
|
||||
.zoom-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
/* 调整transform过渡时间为2s，opacity为1.5s，可按需修改 */
|
||||
transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s ease;
|
||||
transform: scale(0.8);
|
||||
/* 初始缩放比例 */
|
||||
opacity: 0.9;
|
||||
/* 初始透明度（略暗，放大后变亮） */
|
||||
}
|
||||
|
||||
/* 滚动触发后的放大状态 */
|
||||
.zoom-image.active {
|
||||
transform: scale(1.1);
|
||||
/* 放大5%（官网常用比例，不夸张） */
|
||||
opacity: 1;
|
||||
}
|
||||
.xn-t {
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
}
|
||||
.xn-p {
|
||||
padding-top: 0.6rem;
|
||||
font-size: 0.16rem;
|
||||
margin-left: 0.47rem;
|
||||
}
|
||||
.xn-p p {
|
||||
width: 5.84rem;
|
||||
color: #cbcfd8;
|
||||
line-height: 1.5;
|
||||
/* 核心：左内边距控制第二行缩进量 */
|
||||
padding-left: 0.8rem;
|
||||
/* 首行向左偏移，抵消左内边距，实现第二行缩进 */
|
||||
text-indent: -0.8rem;
|
||||
/* 确保p标签是块级，且换行正常 */
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
/* 2. 超出元素宽度的内容隐藏 */
|
||||
overflow: hidden;
|
||||
/* 3. 将超出的文本替换为省略号... */
|
||||
text-overflow: ellipsis;
|
||||
/* 可选：给元素设置一个固定宽度（确保省略效果生效） */
|
||||
}
|
||||
122
public/static/index/mobile/css/topic_laptop/zoom.css
Normal file
122
public/static/index/mobile/css/topic_laptop/zoom.css
Normal file
@@ -0,0 +1,122 @@
|
||||
/* 图片容器：100vw宽，最小宽度1440px，按图片原始比例（2560:1857）定高 */
|
||||
.zoom-container {
|
||||
width: 7.5rem;
|
||||
height: 6.05rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 图片包裹层：与容器同尺寸，定位参考系，承接缩放变换 */
|
||||
.img-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* z-index: -10; */
|
||||
}
|
||||
|
||||
/* 图片：按原始比例填充包裹层，不裁切，初始放大+过渡动画 */
|
||||
.bg-img {
|
||||
width: 7.5rem;
|
||||
height: 6.05rem;
|
||||
display: block;
|
||||
transform: scale(1.5);
|
||||
transition: transform 1.8s ease;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* 图片缩小后的状态 */
|
||||
.bg-img.zoom-out {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* 标注样式：关键修正 - 基于容器绝对定位，百分比参考图片原始比例 */
|
||||
.annotation {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: calc(12px + 0.3vw);
|
||||
opacity: 0;
|
||||
transform: translateY(calc(10px + 0.5vw));
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
/* 关键：标注的定位参考系是容器（与图片同比例），而非缩放后的图片 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* 重置默认值，依赖内联style的百分比定位 */
|
||||
}
|
||||
|
||||
/* 标注显示状态 */
|
||||
.annotation.anno-show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.annotation span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* 确保文字居中对齐 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 标注线条样式：基于文字定位，适配缩放 */
|
||||
.annotation span::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0.01rem;
|
||||
height: 0;
|
||||
bottom: calc(100% + 6px);
|
||||
background-color: #fff;
|
||||
transition: height 0.8s ease;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
/* 向上延伸的标注线条（给需要向上的.annotation加anno-up类） */
|
||||
.annotation.anno-up span::before {
|
||||
/* 把线条位置从文字下方，改成文字上方 */
|
||||
bottom: auto;
|
||||
top: 0.3rem; /* 定位到文字顶部外 */
|
||||
/* 线条方向改为向上延伸 */
|
||||
transform-origin: top center;
|
||||
}
|
||||
.annotation.anno-up1 span::before {
|
||||
/* 把线条位置从文字下方，改成文字上方 */
|
||||
bottom: auto;
|
||||
top: 0.5rem; /* 定位到文字顶部外 */
|
||||
/* 线条方向改为向上延伸 */
|
||||
transform-origin: top center;
|
||||
}
|
||||
/* 标注显示时，设置线条最终高度 */
|
||||
.annotation.anno-show span::before {
|
||||
height: 0.57rem;
|
||||
}
|
||||
|
||||
.zoom-t {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
.zoom-p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.20rem;
|
||||
color: #cbcfd8;
|
||||
position: absolute;
|
||||
top: 0.37rem;
|
||||
z-index: 10;
|
||||
line-height: 1.5;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
}
|
||||
|
||||
/* 标注延迟类 */
|
||||
.anno-delay-1 {
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
.anno-delay-1 span::before {
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
BIN
public/static/index/mobile/images/topic_laptop/zoom-img-1.png
Normal file
BIN
public/static/index/mobile/images/topic_laptop/zoom-img-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -54,4 +54,23 @@
|
||||
text-align: center;
|
||||
color:#cbcfd8;
|
||||
padding:0.4rem 0;
|
||||
}
|
||||
}.dl {
|
||||
width: 100%;
|
||||
padding-top: 0.71rem;
|
||||
}
|
||||
.dl-t {
|
||||
color: #fff;
|
||||
font-size: 0.63rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.dl-p {
|
||||
color: #cbcfd8;
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 0.43rem;
|
||||
/* padding-bottom: 0.37rem; */
|
||||
line-height: 1.8;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user