+ <div class="pai2_icon">
+ <img src="{% static 'pai2/img/paiai_96_96.png' %}">
+ </div>
+ <div class="pai2_desc">
+ <div class="pai2_name">拍爱</div>
+ <div class="pai2_des">即拍即分享</div>
+ </div>
+ <div id="pai2_download" class="pai2_download">立即下载</div>
+ </div>
</body>
</html>
@@ -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> |