css tmp

tkixp9 · Apr 22, 2021 · e4b19b4 · e4b19b4
1 parent b471d63
commit e4b19b4
Show file tree

Hide file tree

Showing 9 changed files with 358 additions and 284 deletions.
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
 </head>
 
 <body>
-<div class="content-container">
+<div class="app-wrap">
 </div>
 <div id="toast" class="single-line"><div class="content"></div></div>
 <div id="promot-dialog" style="display: none">

diff --git a/src/app.js b/src/app.js
@@ -1,7 +1,7 @@
 import 'babel-polyfill'
 
 import './less/public.less'
-import './less/main.less'
+import './less/common.less'
 import './lib/jquery.min.js'
 import { initRPX } from './js/utils/_utils'
 import router from './js/utils/_router'

diff --git a/src/js/pages/category.js b/src/js/pages/category.js
@@ -60,7 +60,7 @@ const categoryController = (() => {
         $('.category-tag').text(['新进代理', '普通代理', '高级代理', '特约代理'][(res.proxy_seller_level - 1) || 0]).show()
       },
       fcb: (res) => {
-        $('.content-container').empty()
+        $('.app-wrap').empty()
         frameutils.showDialog({
           text: res.msg || '获取数据失败！', okCallback: () => {
             router.push({ action: 'login' })
@@ -71,7 +71,7 @@ const categoryController = (() => {
   }
   return {
     init: (params) => {
-      $('.content-container').empty().append(getHtml())
+      $('.app-wrap').empty().append(getHtml())
       fetchData()
       bindActions()
     }

diff --git a/src/js/pages/categoryIncome.js b/src/js/pages/categoryIncome.js
@@ -10,7 +10,7 @@ const incomeController = (() => {
   }
   return {
     init: (params) => {
-      $('.content-container').empty().append(contentHtml)
+      $('.app-wrap').empty().append(contentHtml)
       bindActions()
     }
   }

diff --git a/src/js/pages/home.js b/src/js/pages/home.js
@@ -1,16 +1,40 @@
 const incomeController = (() => {
-  const contentHtml = `<div class="page-in-frame" id="category-income-page">
-        <div class="develop-container">
-            <img src="https://static.zhinikefu.com/fans/static/images/developing.png" />
-            开发中，敬请期待...
+  const linkArray = [
+    { title: '概况介绍', url: 'https://www.vzhuo.com' },
+    { title: '课程', url: 'https://www.vzhuo.com' },
+    { title: '管理层', url: 'https://www.vzhuo.com' },
+    { title: '覆盖范围域', url: 'https://www.vzhuo.com' },
+    { title: '项目', url: 'https://www.vzhuo.com' },
+    { title: '新闻', url: 'https://www.vzhuo.com' },
+  ]
+  const contentHtml =
+    `<div class="page-wrap" id="page-home">
+      <div class="content-wrap top-head-wrap">
+        <div class="content-inner-wrap">
+          <img src="https://s.vzhuo.com/static/imgs/logo_color.png" />
+          <div class="head-link-wrap">
+            ${linkArray.map((item) => {
+              return `<a href="${item.url}" class="head-link-item">${item.title}</a>`
+            })}
+          </div>
+          <div class="head-right-wrap">
+            <a class="btn-normal">预约</a>
+            <a class="btn-normal">联系我们</a>
+            <a class="btn-normal">立即申请</a>
+          </div>
         </div>
+      </div>
+      <div class="develop-container">
+        <img src="https://static.zhinikefu.com/fans/static/images/developing.png" />
+        开发中，敬请期待...
+      </div>
     </div>`
 
   const bindActions = () => {
   }
   return {
     init: (params) => {
-      $('.content-container').empty().append(contentHtml)
+      $('.app-wrap').empty().append(contentHtml)
       bindActions()
     }
   }

diff --git a/src/less/common.less b/src/less/common.less
@@ -0,0 +1,57 @@
+@import "./variable";
+.app-wrap {
+  width: 100%;
+  height: 100%;
+}
+
+.content-wrap {
+  width: 100%;
+}
+.content-inner-wrap {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+.page-in-frame {
+  height: 100%;
+  overflow: auto;
+}
+
+.page-card {
+  margin: .28rem;
+  padding: .28rem;;
+  background: @white-color;
+}
+
+.card-title {
+  font-size: .32rem;
+}
+
+.btn-normal {
+  background: @blue-color;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  padding: 0 0.15rem;
+  display: inline-block;
+  border-radius: 4px;
+  text-align: center;
+  color: @white-color;
+  font-size: .24rem;
+}
+
+.disabled-btn {
+  filter: alpha(opacity=45);
+  -moz-opacity: 0.45;
+  -khtml-opacity: 0.45;
+  opacity: 0.45;
+  &:hover {
+    cursor: default;
+  }
+}
+
+.clearfix:after {
+  content: " ";
+  display: block;
+  height: 0;
+  visibility: hidden;
+  clear: both;
+}
diff --git a/src/less/page/home.less b/src/less/page/home.less
@@ -0,0 +1,6 @@
+@import "../variable";
+#page-home {
+  .top-head-wrap {
+    height: 2rem;
+  }
+}