user.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. {layout name="common/layout" /}
  2. <style>
  3. body {
  4. padding-top: 49px;
  5. }
  6. @keyframes wave-animation {
  7. 0% {
  8. transform: translateX(0) translateZ(0) scaleY(1)
  9. }
  10. 50% {
  11. transform: translateX(-25%) translateZ(0) scaleY(0.55)
  12. }
  13. 100% {
  14. transform: translateX(-50%) translateZ(0) scaleY(1)
  15. }
  16. }
  17. .wave-wrapper {
  18. height: 430px;
  19. position: relative;
  20. }
  21. .wave-inner {
  22. position: absolute;
  23. width: 100%;
  24. overflow: hidden;
  25. height: 430px;
  26. bottom: -1px;
  27. background: #374486;
  28. }
  29. .wave-bg-top {
  30. z-index: 15;
  31. opacity: 0.5;
  32. }
  33. .wave-bg-middle {
  34. z-index: 10;
  35. opacity: 0.75;
  36. }
  37. .wave-bg-bottom {
  38. z-index: 5;
  39. }
  40. .wave-item {
  41. position: absolute;
  42. left: 0;
  43. width: 200%;
  44. height: 430px;
  45. background-repeat: repeat no-repeat;
  46. background-position: 0 bottom;
  47. transform-origin: center bottom;
  48. }
  49. .wave-top {
  50. background-size: 50% 100px;
  51. }
  52. .wave-animation .wave-top {
  53. animation: wave-animation 3s;
  54. -webkit-animation: wave-animation 3s;
  55. -webkit-animation-delay: 1s;
  56. animation-delay: 1s;
  57. }
  58. .wave-middle {
  59. background-size: 50% 120px;
  60. }
  61. .wave-animation .wave-middle {
  62. animation: wave-animation 10s linear infinite;
  63. }
  64. .wave-bottom {
  65. background-size: 50% 100px;
  66. }
  67. .wave-animation .wave-bottom {
  68. animation: wave-animation 15s linear infinite;
  69. }
  70. .userinfo {
  71. position: absolute;
  72. z-index: 99;
  73. text-align: center;
  74. width: 100%;
  75. top: 0;
  76. color: #fff;
  77. }
  78. .header-logo {
  79. margin-top: 60px;
  80. }
  81. .userinfo-avatar {
  82. background: rgba(0, 0, 0, 0.12);
  83. display: inline-block;
  84. position: relative;
  85. padding: 20px;
  86. border-radius: 50%;
  87. min-width: 120px;
  88. }
  89. .userinfo-avatar img {
  90. width: 120px;
  91. height: 120px;
  92. }
  93. .nav-noborder > li.active > a, .nav-noborder > li.active > a:focus, .nav-noborder > li.active > a:hover {
  94. border-color: #fff;
  95. }
  96. .nav-noborder {
  97. border-bottom: none;
  98. }
  99. .comment-content {
  100. border-radius: 3px;
  101. padding: 12px;
  102. border: none;
  103. background: #fafafa;
  104. margin-bottom: 0;
  105. }
  106. .comment-content div {
  107. line-height: 20px !important;
  108. margin-bottom: 0px;
  109. margin-top: 0 !important;
  110. font-size: 14px !important;
  111. font-weight: 400;
  112. color: #777;
  113. font-family: 'Source Sans Pro', sans-serif;
  114. }
  115. .statistics-nums {
  116. margin-top: 5px;
  117. color: #999;
  118. }
  119. </style>
  120. <div class="wave-wrapper wave-animation">
  121. <div class="userinfo">
  122. <div class="header-logo">
  123. <a href="{:addon_url('cms/user/index',[':id'=>$__USER__['id']],false)}" class="userinfo-avatar">
  124. <img class="img-circle" src="{$__USER__.avatar|cdnurl}" alt="{$__USER__.nickname}">
  125. </a>
  126. </div>
  127. <h2 class="">
  128. <span><strong>{$__USER__.nickname}</strong></span>
  129. </h2>
  130. <h5 class="">
  131. <span>{$__USER__.bio|default="这家伙很懒,什么也没写"}</span>
  132. </h5>
  133. </div>
  134. <div class="wave-inner wave-bg-top">
  135. <div class="wave-item wave-top" style="background-image: url('__ADDON__/img/wave-top.png')"></div>
  136. </div>
  137. <div class="wave-inner wave-bg-middle">
  138. <div class="wave-item wave-middle" style="background-image: url('__ADDON__/img/wave-mid.png')"></div>
  139. </div>
  140. <div class="wave-inner wave-bg-bottom">
  141. <div class="wave-item wave-bottom" style="background-image: url('__ADDON__/img/wave-bot.png')"></div>
  142. </div>
  143. </div>
  144. <div class="container-fluid" style="padding:0px 0 50px 0;background:#fff;">
  145. <header class="space-header">
  146. <div class="container">
  147. <div class="row">
  148. <div class="col-xs-12 col-sm-8 col-md-4 col-md-offset-4">
  149. <div class="row statistics pt-1 text-center" style="border-top:none;">
  150. <div class="col-xs-4">
  151. <div class="statistics-text">文章</div>
  152. <a href="{:addon_url('cms/user/index',[':id'=>$__USER__['id']],false)}/archives">
  153. <div class="statistics-nums">{$statistics.archives}</div>
  154. </a>
  155. </div>
  156. <div class="col-xs-4">
  157. <div class="statistics-text">评论</div>
  158. <a href="{:addon_url('cms/user/index',[':id'=>$__USER__['id']],false)}/comment">
  159. <div class="statistics-nums">{$statistics.comments}</div>
  160. </a>
  161. </div>
  162. <div class="col-xs-4">
  163. <div class="statistics-text">加入时间</div>
  164. <div class="statistics-nums">{$__USER__.createtime|human_date}</div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. </header>
  171. </div>
  172. <div class="container" id="content-container">
  173. <div class="row mt-4 mb-4">
  174. <div class="col-md-8 col-sm-12">
  175. <ul class="nav nav-tabs nav-noborder mb-10 mt-20">
  176. <li class="active"><a href="javascript:;">{$title}</a></li>
  177. </ul>
  178. <div class="tab-inner" style="background:#fff;padding:15px;">
  179. {if $type == 'archives'}
  180. <div class="article-list">
  181. {volist name="archivesList" id="item"}
  182. {include file="common/item" /}
  183. {/volist}
  184. {include file="common/pageinfo" /}
  185. </div>
  186. {else/}
  187. <div class="article-list">
  188. {volist name="commentList" id="item"}
  189. <article class="article-item">
  190. <div class="media">
  191. <div class="media-left">
  192. <a href="{$item.source.url}">
  193. <div class="embed-responsive embed-responsive-4by3 img-zoom">
  194. <img src="{$item.source.image}">
  195. </div>
  196. </a>
  197. </div>
  198. <div class="media-body">
  199. <h3 class="article-title">
  200. <a href="{$item.source.url}" {if isset($item.source.style) && $item.source.style}style="{$item.source.style_text|default=''}" {/if}>{$item.source.title}</a>
  201. </h3>
  202. <div class="comment-content">
  203. <div>{$item.content}</div>
  204. </div>
  205. <div class="article-tag">
  206. <span itemprop="date"><i class="fa fa-calendar"></i> {:date("Y年m月d日", $item['createtime'])}</span>
  207. </div>
  208. </div>
  209. </div>
  210. </article>
  211. {/volist}
  212. {include file="common/pageinfo" /}
  213. </div>
  214. {/if}
  215. </div>
  216. </div>
  217. <div class="col-md-4 col-sm-12">
  218. <div class="article-sidebar">
  219. <!-- S 会员菜单 -->
  220. <div class="panel panel-default">
  221. <div class="panel-body">
  222. <ul class="nav nav-pills nav-stacked space-nav">
  223. <li class="{:$type=='archives'?'active':''}"><a href="{:addon_url('cms/user/index',[':id'=>$__USER__['id']],false)}/archives">{:$user['id']==$__USER__.id?'我':'TA'}的文章</a></li>
  224. <li class="{:$type=='comment'?'active':''}"><a href="{:addon_url('cms/user/index',[':id'=>$__USER__['id']],false)}/comment">{:$user['id']==$__USER__.id?'我':'TA'}的评论</a></li>
  225. </ul>
  226. </div>
  227. </div>
  228. <!-- E 会员菜单 -->
  229. <div class="panel panel-blockimg">
  230. {cms:block name="sidebarad1" /}
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>