adjust page

Brightcells лет %!s(int64=9): %!d(string=назад)
Родитель
Сommit
10fdf9ba1f
3 измененных файлов с 162 добавлено и 21 удалено
  1. 94 11
      page/templates/page/contact_us.html
  2. 1 1
      page/templates/page/download.html
  3. 67 9
      page/templates/page/user_agreement.html

+ 94 - 11
page/templates/page/contact_us.html

@@ -1,29 +1,112 @@
1
+{% load staticfiles %}
2
+
1 3
 <!DOCTYPE html>
2 4
 <html lang="zh-CN">
3 5
 <head>
4 6
     <meta charset="utf-8">
5 7
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
-    <meta name="format-detection" content="telephone=no,email=no,address=no">
8
+{#    <meta name="format-detection" content="telephone=no,email=no,address=no">#}
7 9
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
8 10
     <title>联系我们</title>
9 11
 
10 12
     <style>
11
-        div {line-height:150%}
12
-        .container {padding:5px 5%;text-align:justify}
13
-        .center {text-align:center}
14
-        .contact {position:fixed;top:20%;width:90%}
15
-        .item {font-size:13px}
13
+{#            index.css#}
14
+        *, :after, :before {
15
+            box-sizing: border-box;
16
+            outline: none;
17
+        }
18
+{#            Body#}
19
+        body {
20
+            color: #333;
21
+            font-family: -apple-system,Arial,Microsoft YaHei,Helvetica Neue,sans-serif;
22
+            -webkit-font-smoothing: antialiased;
23
+            text-rendering: optimizeLegibility;
24
+            background-color: #fff;
25
+        }
26
+        body {
27
+            margin: 0;
28
+        }
29
+{#            A#}
30
+        a {
31
+            color: #000;
32
+            text-decoration: none;
33
+            -webkit-transition: color,.3s;
34
+            transition: color,.3s;
35
+        }
36
+        a {
37
+            background-color: transparent;
38
+        }
39
+{#            Img#}
40
+        img {
41
+            border: 0;
42
+        }
43
+        div {
44
+            line-height: 150%;
45
+        }
46
+        .container {
47
+            position: relative;
48
+            width: 960px;
49
+            margin-left: auto;
50
+            margin-right: auto;
51
+        }
52
+        @media (max-width: 960px) {
53
+            .container {
54
+                width: 100%;
55
+            }
56
+        }
57
+        html, body {
58
+            height: 100%;
59
+            overflow: hidden;
60
+        }
61
+        .container {
62
+            position: relative;
63
+            width: 100%;
64
+            height: 100%;
65
+            padding: 2em .5em;
66
+            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
67
+        }
68
+        .logo {
69
+            height: 70px;
70
+        }
71
+        .title {
72
+            font-size: 1.5em;
73
+        }
74
+        .text-center {
75
+            text-align: center;
76
+        }
77
+        @media(max-height: 600px) {
78
+            .logo {
79
+                height: 60px;
80
+            }
81
+            .title {
82
+                font-size: 1.2em;
83
+            }
84
+        }
85
+        .contact {
86
+            padding: 10%;
87
+            text-align: justify;
88
+        }
89
+        .small_size {
90
+            font-size: 13px;
91
+        }
16 92
     </style>
17 93
 </head>
18 94
 <body>
19 95
     <div class="container" >
96
+        <article class="text-center">
97
+            <a href="http://pai.ai">
98
+                <img src="{% static 'pai2/img/paiai_96_96.png' %}" class="logo">
99
+            </a>
100
+            <div class="title">
101
+                <a href="http://pai.ai" class="text-blue">拍爱</a>
102
+            </div>
103
+        </article>
20 104
         <div class="content">
21
-            <h1 class="center">联系我们</h1>
22 105
             <div class="contact">
23
-                <div><strong>官方微信: </strong><span class="item">pai_ai</span></div>
24
-                <div><strong>商务合作: </strong><span class="item">partner@pai.ai</span></div>
25
-                <div><strong>用户反馈: </strong><span class="item">feedback@pai.ai</span></div>
26
-                <div><strong>公司地址: </strong><span class="item">北京市海淀区西八里庄路玲珑商务楼</span></div>
106
+                <div><strong>官方微信: </strong><span class="small_size">pai_ai</span></div>
107
+                <div><strong>商务合作: </strong><span class="small_size">partner@pai.ai</span></div>
108
+                <div><strong>用户反馈: </strong><span class="small_size">feedback@pai.ai</span></div>
109
+                <div><strong>公司地址: </strong><span class="small_size">北京市海淀区西八里庄路玲珑商务楼</span></div>
27 110
             </div>
28 111
         </div>
29 112
     </div>

+ 1 - 1
page/templates/page/download.html

@@ -49,7 +49,7 @@
49 49
             }
50 50
             @media (max-width: 960px) {
51 51
                 .container {
52
-                    width:100%
52
+                    width: 100%;
53 53
                 }
54 54
             }
55 55
             .text-center {

+ 67 - 9
page/templates/page/user_agreement.html

@@ -8,18 +8,76 @@
8 8
     <title>用户协议</title>
9 9
 
10 10
     <style>
11
-        div {line-height:200%}
12
-        .container {padding:5px;text-align:justify}
13
-        .center {text-align:center}
14
-        .right {text-align:right}
15
-        .indent {text-indent:2em}
16
-        .item {line-height:600%}
11
+{#            index.css#}
12
+        *, :after, :before {
13
+            box-sizing: border-box;
14
+            outline: none;
15
+        }
16
+{#            Body#}
17
+        body {
18
+            color: #333;
19
+            font-family: -apple-system,Arial,Microsoft YaHei,Helvetica Neue,sans-serif;
20
+            -webkit-font-smoothing: antialiased;
21
+            text-rendering: optimizeLegibility;
22
+            background-color: #fff;
23
+        }
24
+        body {
25
+            margin: 0;
26
+        }
27
+{#            A#}
28
+        a {
29
+            color: #000;
30
+            text-decoration: none;
31
+            -webkit-transition: color,.3s;
32
+            transition: color,.3s;
33
+        }
34
+        a {
35
+            background-color: transparent;
36
+        }
37
+{#            Img#}
38
+        img {
39
+            border: 0;
40
+        }
41
+        div {
42
+            line-height: 150%;
43
+        }
44
+        .container {
45
+            position: relative;
46
+            width: 960px;
47
+            margin-left: auto;
48
+            margin-right: auto;
49
+            text-align: justify;
50
+        }
51
+        @media (max-width: 960px) {
52
+            .container {
53
+                width: 100%;
54
+            }
55
+        }
56
+        .container {
57
+            position: relative;
58
+            width: 100%;
59
+            height: 100%;
60
+            padding: 2em .5em;
61
+            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
62
+        }
63
+        .text-center {
64
+            text-align: center;
65
+        }
66
+        .text-right {
67
+            text-align: right;
68
+        }
69
+        .indent {
70
+            text-indent: 2em;
71
+        }
72
+        .item {
73
+            line-height: 300%;
74
+        }
17 75
     </style>
18 76
 </head>
19 77
 <body>
20 78
     <div class="container" >
21 79
         <div class="content">
22
-            <h1 class="center">软件许可及服务协议</h1>
80
+            <h1 class="text-center">软件许可及服务协议</h1>
23 81
             <div class="indent"><strong>欢迎你使用拍爱。</strong></div>
24 82
             <div class="indent"><strong>拍爱是北京佳艺徕经贸有限责任公司</strong>(以下称“拍爱网络”或“我们'')所运营的影像拍摄、交流及分享服务,旨在更好的满足用户对影像的需求。</div>
25 83
 
@@ -158,8 +216,8 @@
158 216
 
159 217
             <div class="indent">如你对本协议有任何疑问,请及时与我们取得联系。</div>
160 218
 
161
-            <div class="right">拍爱网络</div>
162
-            <div class="right">本生效日: 2016-01-01</div>
219
+            <div class="text-right">拍爱网络</div>
220
+            <div class="text-right">本生效日: 2016-01-01</div>
163 221
         </div>
164 222
     </div>
165 223
 </body>