Skip to content

Z
zhichan
Commit c844a436 by 尹亚亭
Options

finish static layout of index

parent 25798f71
Showing with 237 additions and 88 deletions
h5-channel-web/src/views/Home.vue
...@@ -41,3 +41,14 @@ export default { ...@@ -41,3 +41,14 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" >
.home {
main {
height: 617px;
}
nav {
height: 50px;
}
}
</style>
h5-channel-web/src/views/pages/home/HomeTab.vue
...@@ -2,94 +2,121 @@ ...@@ -2,94 +2,121 @@
<div class="home-tab"> <div class="home-tab">
<!-- 头部导航栏 --> <!-- 头部导航栏 -->
<van-nav-bar title="首页" left-text="关闭" left-arrow @click-left="onClickLeft" /> <van-nav-bar title="首页" left-text="关闭" left-arrow @click-left="onClickLeft" />
<!-- 中间banner图 --> <div class="content">
<div class="banner"> <!-- 中间banner图 -->
<img src="@/assets/images/home/banner.png" alt /> <div class="banner">
</div> <img src="@/assets/images/home/banner.png" alt />
<!-- 商标注册服务标题 --> </div>
<div class="title-wrap"> <!-- 商标注册服务标题 -->
<i></i> <div class="title-wrap">
<span>商标注册服务</span> <i></i>
<b></b> <span>商标注册服务</span>
</div> <b></b>
<!-- 商标注册服务：自助注册 专家辅助 担保申请 --> </div>
<div class="reg-classify"> <!-- 商标注册服务：自助注册 专家辅助 担保申请 -->
<ul> <div class="reg-classify">
<li> <ul>
<h3>自助注册</h3> <li>
<h4>适合熟知商标注册流程的企业用户</h4> <h3>自助注册</h3>
<div class="line"></div> <h4>适合熟知商标注册流程的企业用户</h4>
<div class="desc"> <div class="line"></div>
<p> <div class="desc">
<strong></strong> <p>
<span>自己检索商标,准备官方所需注册材料</span> <strong></strong>
</p> <span>自己检索商标,准备官方所需注册材料</span>
<!-- 模拟写死的数据 --> </p>
<p> <!-- 模拟写死的数据 -->
<strong></strong> <p>
<span>提交迅速,及时反馈</span> <strong></strong>
</p> <span>提交迅速,及时反馈</span>
<p> </p>
<strong></strong> <p>
<span>全程跟踪,掌握申请进度</span> <strong></strong>
</p> <span>全程跟踪,掌握申请进度</span>
</div> </p>
<div class="price"> </div>
<i>￥300</i> <div class="price">
<b>/ 类</b> <i>￥300</i>
</div> <b>/ 类</b>
<div class="button" @click="goToSelfReg">立即办理</div> </div>
</li> <div class="button" @click="goToSelfReg">立即办理</div>
<!-- 模拟写死的数据 --> </li>
<li> <!-- 模拟写死的数据 -->
<h3>专家辅助</h3> <li>
<h4>适合熟知商标注册流程的企业用户</h4> <h3>专家辅助</h3>
<div class="line"></div> <h4>适合熟知商标注册流程的企业用户</h4>
<div class="desc"> <div class="line"></div>
<p> <div class="desc">
<strong></strong> <p>
<span>自己检索商标,准备官方所需注册材料</span> <strong></strong>
</p> <span>自己检索商标,准备官方所需注册材料</span>
<p> </p>
<strong></strong> <p>
<span>提交迅速,及时反馈</span> <strong></strong>
</p> <span>提交迅速,及时反馈</span>
<p> </p>
<strong></strong> <p>
<span>全程跟踪,掌握申请进度</span> <strong></strong>
</p> <span>全程跟踪,掌握申请进度</span>
</div> </p>
<div class="price"> </div>
<i>￥680</i> <div class="price">
<b>/ 类</b> <i>￥680</i>
</div> <b>/ 类</b>
<div class="button" @click="goToOtherreg">立即办理</div> </div>
</li> <div class="button" @click="goToOtherreg">立即办理</div>
<li> </li>
<h3>专家辅助</h3> <li>
<h4>适合熟知商标注册流程的企业用户</h4> <h3>专家辅助</h3>
<div class="line"></div> <h4>适合熟知商标注册流程的企业用户</h4>
<div class="desc"> <div class="line"></div>
<p> <div class="desc">
<strong></strong> <p>
<span>自己检索商标,准备官方所需注册材料</span> <strong></strong>
</p> <span>自己检索商标,准备官方所需注册材料</span>
<p> </p>
<strong></strong> <p>
<span>提交迅速,及时反馈</span> <strong></strong>
</p> <span>提交迅速,及时反馈</span>
<p> </p>
<strong></strong> <p>
<span>全程跟踪,掌握申请进度</span> <strong></strong>
</p> <span>全程跟踪,掌握申请进度</span>
</div> </p>
<div class="price"> </div>
<i>￥1380</i> <div class="price">
<b>/ 类</b> <i>￥1380</i>
</div> <b>/ 类</b>
<div class="button" @click="goToOtherreg">立即办理</div> </div>
</li> <div class="button" @click="goToOtherreg">立即办理</div>
</ul> </li>
</ul>
</div>
<!-- 图文说明：注册流程 服务优势 常见问题 增值服务 -->
<div class="pic-wrap pic-one">
<h2>注册流程</h2>
<h3>轻松掌握注册流程</h3>
<div class="short-line"></div>
<b></b>
</div>
<div class="pic-wrap pic-two">
<h2>服务优势</h2>
<h3>金牌服务让您省心</h3>
<div class="short-line"></div>
<b></b>
</div>
<div class="pic-wrap pic-three">
<h2>常见问题</h2>
<h3>疑难解答在这里</h3>
<div class="short-line"></div>
<b></b>
</div>
<div class="pic-wrap pic-four">
<h2>增值服务</h2>
<h3>免费为您开启</h3>
<div class="short-line"></div>
<b></b>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -114,7 +141,15 @@ export default { ...@@ -114,7 +141,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-tab { .home-tab {
height: 100%;
background: #fbf8fb; background: #fbf8fb;
.van-nav-bar {
height: 46px;
}
.content {
height: 571px;
overflow-y: scroll;
}
.banner { .banner {
height: 188px; height: 188px;
img { img {
...@@ -240,5 +275,107 @@ export default { ...@@ -240,5 +275,107 @@ export default {
} }
} }
} }
.pic-wrap {
display: inline-block;
width: 170px;
height: 92px;
position: relative;
h2 {
width: 80px;
line-height: 25px;
font-size: 18px;
padding: 16px 0 4px 20px;
}
h3 {
width: 100px;
line-height: 17px;
font-size: 12px;
padding-left: 20px;
position: absolute;
z-index: 2;
}
.short-line {
width: 10px;
height: 2px;
position: absolute;
top: 68px;
left: 21px;
}
b {
display: inline-block;
width: 71px;
height: 61px;
background-size: 100% 100%;
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
}
}
.pic-one {
margin: 0 9px 9px 13px;
background: #ece8f0;
h2 {
color: #7963ad;
padding: 16px 0 4px 20px;
}
h3 {
color: #7963ad;
padding-left: 20px;
}
.short-line {
background: #7963ad;
}
b {
background: url("../../../assets/images/home/zclc.png") no-repeat;
}
}
.pic-two {
background: #fff0dc;
h2 {
color: #a37d50;
}
h3 {
color: #a37d50;
}
.short-line {
background: #a37d50;
}
b {
background: url("../../../assets/images/home/fwys.png") no-repeat;
}
}
.pic-three {
background: #dbeafc;
margin: 0 9px 13px 13px;
h2 {
color: #5e718c;
}
h3 {
color: #5e718c;
}
.short-line {
background: #5e718c;
}
b {
background: url("../../../assets/images/home/cjwt.png") no-repeat;
}
}
.pic-four {
margin-bottom: 13px;
background: #f7eae7;
h2 {
color: #9d664f;
}
h3 {
color: #9d664f;
}
.short-line {
background: #9d664f;
}
b {
background: url("../../../assets/images/home/zzfw.png") no-repeat;
}
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment