feat: mobile nas主题产品体验页
This commit is contained in:
58
app/index/view/mobile/topic_nas/product.html
Normal file
58
app/index/view/mobile/topic_nas/product.html
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
{extend name="public/base" /}
|
||||||
|
{block name="style"}
|
||||||
|
<link rel="stylesheet" type="text/css" href="__CSS__/topic_nas_product.css" />
|
||||||
|
{/block}
|
||||||
|
{block name="main"}
|
||||||
|
<div class="narsZTPC">
|
||||||
|
<div class="nZTtopCtMian narssbshow">
|
||||||
|
{notempty name="focus_image"}
|
||||||
|
<a {notempty name="focus_image.link"}href="{$focus_image.link}"{/notempty}>
|
||||||
|
<img src="{$focus_image.image}" class="narsZCimg">
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
{notempty name="step"}
|
||||||
|
<div class="narsZTicos">
|
||||||
|
{volist name="step" id="st"}
|
||||||
|
<div class="nztit">
|
||||||
|
<img src="{$st.image}" class="narsicimg">
|
||||||
|
<span class="narsstep">{$st.title}</span>
|
||||||
|
<span class="narszttext">{$st.desc|raw}</span>
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
{notempty name="trial_instructions"}
|
||||||
|
<div class="narsZTinfo">
|
||||||
|
<div class="nztif-left">
|
||||||
|
{volist name="trial_instructions" id="trial" offset="0" length="2"}
|
||||||
|
<div class="narsztewmit">
|
||||||
|
<a {notempty name="trial.link"}href="{$trial.link}" target="_blank"{/notempty}>
|
||||||
|
<img src="{$trial.image}" class="nztewmimg">
|
||||||
|
</a>
|
||||||
|
<p {:style(["color"=>$trial.title_txt_color])}>{$trial.title}</p>
|
||||||
|
<span {:style(["color"=>$trial.desc_txt_color])}>{$trial.desc|raw}</span>
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
<div class="nztif-right">
|
||||||
|
{notempty name="trial_instructions.2"}
|
||||||
|
<span class="sysmtxt" {:style(["color"=>$trial_instructions.2.title_txt_color])}>
|
||||||
|
{$trial_instructions.2.title|default=''}
|
||||||
|
</span>
|
||||||
|
<div class="sminfo" {:style(["color"=>$trial_instructions.2.desc_txt_color])}>
|
||||||
|
{$trial_instructions.2.desc|raw|default=''}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<div class="nztbzyj">
|
||||||
|
{volist name="trial_instructions" id="trial" offset="3"}
|
||||||
|
<a {notempty name="trial.link"}href="{$trial.link}" target="_blank"{/notempty}>
|
||||||
|
<span {:style(["color"=>$trial.title_txt_color])}>{$trial.title}</span>
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/block}
|
||||||
179
public/static/index/mobile/css/topic_nas_product.css
Normal file
179
public/static/index/mobile/css/topic_nas_product.css
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
.narsZTPC {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTabs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 2.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTabs .nZTabIt {
|
||||||
|
color: #001717;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 3.25rem;
|
||||||
|
line-height: 3.25rem;
|
||||||
|
padding: 0 3.125rem;
|
||||||
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 28px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #001717;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTabs .nZTabIt:first-child {
|
||||||
|
margin-right: 6.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTabs .nZTabIt_active {
|
||||||
|
border: 1px solid #004cfa;
|
||||||
|
color: #fff;
|
||||||
|
background: #004cfa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian .narsZCimg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 13%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian .narsZTicos {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian .narsZTicos .nztit {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian .narsZTicos .nztit .narsicimg {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian .narsZTicos .nztit .narsstep {
|
||||||
|
color: #685557;
|
||||||
|
padding: 0.625rem 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narsZTPC .nZTtopCtMian .narsZTicos .nztit .narszttext {
|
||||||
|
color: #2d2c2c;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narswljshow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo {
|
||||||
|
width: 90%;
|
||||||
|
background: #f5f5f7;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 15%;
|
||||||
|
padding-bottom: 45px;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 45%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit .nztewmimg {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit p {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
color: F5F5F7;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-left .narsztewmit span {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 85%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-right .sysmtxt {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #001717;
|
||||||
|
padding-bottom: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-right .sminfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #001717;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nZTtopCtMian .narsZTinfo .nztif-right .sminfo span {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nztbzyj {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nztbzyj a {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #2d2c2c;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
border-bottom: 1px solid #cbcbcd;
|
||||||
|
margin-right: 4.5rem;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user