Home Explore Help
Register Sign In
Kodo
/
kodo
Watch 2
Star 0
Fork 0

Browse Source
adjust download section of photo_detail/session_detail

Brightcells 9 years ago
parent
9671c0e989
commit
696c8d2e2b
2 changed files with 74 additions and 132 deletions
Show Diff Stats
  1. 25 121
      photo/templates/photo/photo_detail.html
  2. 49 11
      photo/templates/photo/session_detail.html

+ 25 - 121
photo/templates/photo/photo_detail.html
View File 

@@ -8,118 +8,22 @@
8 8 
         <meta name="format-detection" content="telephone=no,email=no,address=no">
9 9 
         <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
10 10 
         <title>照片详情</title>
11 
-        <script>!function(){var d=document.documentElement;d.style.fontSize=d.clientWidth*0.05+'px'}()</script>
12 11 
         <style>
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 
-{#            Container#}
44 
-            .container {
45 
-                width: 960px;
46 
-                margin-left: auto;
47 
-                margin-right: auto;
48 
-                position: relative;
49 
-            }
50 
-            @media (max-width: 960px) {
51 
-                .container {
52 
-                    width: 100%;
53 
-                }
54 
-            }
55 
-            .text-center {
56 
-                text-align: center;
57 
-            }
58 
-{#            Article#}
59 
-            article {
60 
-                display: block;
61 
-            }
62 
-{#            app.css#}
63 
-            html, body {
64 
-                height: 100%;
65 
-{#                overflow: hidden;#}
66 
-            }
67 
-            .container {
68 
-                position: relative;
69 
-                width: 100%;
70 
-                height: 100%;
71 
-                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
72 
-            }
73 
-            img {
74 
-                width: 100%;
75 
-            }
12 
+            body {position:absolute;top:0;right:0;bottom:0;left:0;margin:0;font-family:"Microsoft YaHei","sans-serif","Microsoft Sans Serif","Microsoft JhengHei UI";background:#fff6e6;color:gray}
13 
+            img {width:100%}
76 14
77 
-            .download_section {
78 
-                position: absolute;
79 
-                right: 0;
80 
-                bottom: 0;
81 
-                left: 0;
82 
-                height: 55px;
83 
-                padding: 5px;
84 
-                background: #f0f0f0;
85 
-                box-sizing: border-box;
86 
-            }
87 
-            .pai2_icon {
88 
-                width: 45px;
89 
-                height: 45px;
90 
-                float: left;
91 
-            }
92 
-            .pai2_icon>img {
93 
-                width: 100%;
94 
-                height: 100%;
95 
-            }
96 
-            .pai2_desc {
97 
-                height: 45px;
98 
-                padding: 3px 0 0 5px;
99 
-                float: left;
100 
-            }
101 
-            .pai2_name {
102 
-                font-size: 15px;
103 
-                text-align: left;
104 
-            }
105 
-            .pai2_des {
106 
-                padding-top: 7px;
107 
-                font-size: 12px;
108 
-                line-height: 23px;
109 
-                color: #8f8f8f;
110 
-                text-align: left;
111 
-            }
112 
-            .pai2_download {
113 
-                position: relative;
114 
-                top: 5px;
115 
-                width: 100px;
116 
-                height: 35px;
117 
-                line-height: 35px;
118 
-                text-align: center;
119 
-                background: #d13621;
120 
-                color: #fff;
121 
-                border-radius: 5px;
122 
-                float: right
15 
+            /* For Download Section */
16 
+            .download_section {position:fixed;right:0;bottom:0;left:0;height:55px;padding:5px;background:#f0f0f0;box-sizing:border-box}
17 
+            .pai2_icon {width:45px;height:45px;float:left}
18 
+            .pai2_icon>img {width:100%;height:100%}
19 
+            .pai2_desc {height:45px;padding:5px 0 0 5px;float:left}
20 
+            .pai2_name {padding-top:2px;font-size:14px;text-align:left}
21 
+            .pai2_des {padding-top:2px;font-size:12px;line-height:23px;color:#8f8f8f;text-align:left}
22 
+            .pai2_download {position:relative;top:5px;width:100px;height:35px;line-height:35px;text-align:center;background:#d13621;color:#fff;border-radius:5px;float:right}
23 
+            /* For PC */
24 
+            body, .download_section {
25 
+                max-width: 414px !important;
26 
+                margin: 0 auto !important;
123 27 
             }
124 28 
         </style>
125 29 
     </head>
 
@@ -127,18 +31,18 @@
127 31 
         <div class="container">
128 32 
             <article class="text-center">
129 33 
                 <img src="{{ photo_url }}">
130 
-
131 
-                <div id="download_section" class="download_section">
132 
-                    <div class="pai2_icon">
133 
-                        <img src="{% static 'pai2/img/paiai_96_96.png' %}">
134 
-                    </div>
135 
-                    <div class="pai2_desc">
136 
-                        <div class="pai2_name">拍爱</div>
137 
-                        <div class="pai2_des">即拍即分享</div>
138 
-                    </div>
139 
-                    <div id="pai2_download" class="pai2_download">立即下载</div>
140 
-                </div>
141 34 
             </article>
142 35 
         </div>
36 
+
37 
+        <div id="download_section" class="download_section">
38 
+            <div class="pai2_icon">
39 
+                <img src="{% static 'pai2/img/paiai_96_96.png' %}">
40 
+            </div>
41 
+            <div class="pai2_desc">
42 
+                <div class="pai2_name">拍爱</div>
43 
+                <div class="pai2_des">即拍即分享</div>
44 
+            </div>
45 
+            <div id="pai2_download" class="pai2_download">立即下载</div>
46 
+        </div>
143 47 
     </body>
144 48 
 </html>

+ 49 - 11
photo/templates/photo/session_detail.html
View File 

@@ -1,12 +1,50 @@
1 
+{% load staticfiles %}
2 
+
1 3 
 <!DOCTYPE html>
2 
-<html>
3 
-<head lang="en">
4 
-    <meta charset="UTF-8">
5 
-    <title></title>
6 
-</head>
7 
-<body>
8 
-    {% for photo in photos %}
9 
-    <div><img src="{{ photo.p_photo_url }}"></div>
10 
-    {% endfor %}
11 
-</body>
12 
-</html>
4 
+<html lang="zh-CN">
5 
+    <head>
6 
+        <meta charset="utf-8">
7 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 
+        <meta name="format-detection" content="telephone=no,email=no,address=no">
9 
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
10 
+        <title>照片详情</title>
11 
+        <style>
12 
+            body {position:absolute;top:0;right:0;bottom:0;left:0;margin:0;font-family:"Microsoft YaHei","sans-serif","Microsoft Sans Serif","Microsoft JhengHei UI";background:#fff6e6;color:gray}
13 
+            img {width:100%}
14 
+
15 
+            /* For Download Section */
16 
+            .download_section {position:fixed;right:0;bottom:0;left:0;height:55px;padding:5px;background:#f0f0f0;box-sizing:border-box}
17 
+            .pai2_icon {width:45px;height:45px;float:left}
18 
+            .pai2_icon>img {width:100%;height:100%}
19 
+            .pai2_desc {height:45px;padding:5px 0 0 5px;float:left}
20 
+            .pai2_name {padding-top:2px;font-size:14px;text-align:left}
21 
+            .pai2_des {padding-top:2px;font-size:12px;line-height:23px;color:#8f8f8f;text-align:left}
22 
+            .pai2_download {position:relative;top:5px;width:100px;height:35px;line-height:35px;text-align:center;background:#d13621;color:#fff;border-radius:5px;float:right}
23 
+            /* For PC */
24 
+            body, .download_section {
25 
+                max-width: 414px !important;
26 
+                margin: 0 auto !important;
27 
+            }
28 
+        </style>
29 
+    </head>
30 
+    <body>
31 
+        <div class="container">
32 
+            <article class="text-center">
33 
+                {% for photo in photos %}
34 
+                <div><img src="{{ photo.p_photo_url }}"></div>
35 
+                {% endfor %}
36 
+            </article>
37 
+        </div>
38 
+
39 
+        <div id="download_section" class="download_section">
40 
+            <div class="pai2_icon">
41 
+                <img src="{% static 'pai2/img/paiai_96_96.png' %}">
42 
+            </div>
43 
+            <div class="pai2_desc">
44 
+                <div class="pai2_name">拍爱</div>
45 
+                <div class="pai2_des">即拍即分享</div>
46 
+            </div>
47 
+            <div id="pai2_download" class="pai2_download">立即下载</div>
48 
+        </div>
49 
+    </body>
50 
+</html>