github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/myself/myself_info_frame.html (about) 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="copyright" content="www.apicloud.com" /> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 7 <title>个人资料</title> 8 <link rel="stylesheet" type="text/css" href="../css/api.css" /> 9 <style> 10 html,body {min-height: 100%;background-color: #f9f9f9;} 11 .fr {float: right;} 12 .fl {float: left;} 13 .mt5 {margin-top: 5px;} 14 .mt10 {margin-top: 10px;} 15 .mt15 {margin-top: 15px;} 16 .mt20 {margin-top: 20px;} 17 .ml5 {margin-left: 0.5em;} 18 .mr5 {margin-right: 0.5em;} 19 .hdivider {width: 100%; height: 1px;background-color: #e0e0e0;} 20 .br {border-right: 1px solid #e0e0e0;} 21 22 .row {display: -webkit-box;display: -webkit-flex;} 23 .col {-webkit-box-flex:1; -webkit-flex:1; flex:1;margin: 0 5px; position: relative;} 24 25 .swiper-container img {width: 100%;} 26 27 /* 歌单标题 */ 28 .sectionTitle {height: 2em; line-height: 2em; font-size: 1.12em;} 29 .sectionTitle .titleDivider {display: inline-block; height: 1.12em; width: 3px; vertical-align: top; background-color: #D43C33; margin-top: 0.44em; margin-left: 0.7em; margin-right: 0.3em;} 30 /* 歌单 */ 31 .col .listcoverbar {position: absolute; top: 0; background-color: rgba(0,0,0,0.4); width: 100%;height: 1.2em;} 32 .col .listcoverbar span {color: #fff;} 33 .col .listcoverbar .earphone {width: 1em; margin-top: 0.2em; margin-right: 0.3em;} 34 .col .listcover {width: 100%;} 35 .col .listtitle {height: 2.4em; font-size: 1em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} 36 37 /* item样式 */ 38 .egret-item {height: 4em;} 39 .egret-item .egret-item-box-cover-center {display: table; height: inherit;} 40 .egret-item .egret-item-box-cover-center .egret-item-box-abtc {display: table-cell; vertical-align: middle;} 41 .egret-item .egret-item-box-cover-center .egret-item-box-abtc img {width: 3em; vertical-align: top;} 42 /* 右侧箭头样式 */ 43 .egret-item .egret-item-arrow {display: table; height: inherit;} 44 .egret-item .egret-item-arrow .egret-item-box-abtc {display: table-cell; vertical-align: middle;} 45 .egret-item .egret-item-arrow .egret-item-box-abtc img {width: 0.8em; vertical-align: top;} 46 /* 中间shelf 两个条目*/ 47 .egret-item .egret-item-shelf {height: inherit; } 48 .egret-item .egret-item-shelf .egret-item-shelf-title {font-size: 1.1em; margin-top: 0.6em;} 49 .egret-item .egret-item-shelf .egret-item-shelf-subtitle {font-size: 0.6em; color: #666; margin-top: 0.6em;} 50 /* 中间shelf 一个条目 */ 51 .egret-item .egret-item-shelf-single {height: inherit; line-height: 4em;font-size: 1.1em;} 52 .egret-item .egret-item-shelf-redclassify {color: #E03F40; border:1px solid #E03F40; font-size: inherit;padding: 0.1em;border-radius: 1px;margin-right: 5px;} 53 54 55 /* 用flex重写框架 */ 56 .egret-flex-item {display: -webkit-box;-webkit-box-align:center;height: 3em;/*background-color: #fff;*/} 57 /* 左部logo */ 58 .egret-flex-item-logo {max-width: 50px; min-width: 50px; margin-left: 0.5em; margin-right: 0.2em;-webkit-box-flex: 1; -webkit-box-align: center;} 59 .egret-flex-item-logo img {height: 2em; width: 2em; -webkit-box-align: center;vertical-align: top;/*否则图片不会居中，底部仍然是会有空白*/} 60 /* 中间文本信息 */ 61 .egret-flex-item-shelf {overflow: hidden; -webkit-box-flex:2; -webkit-box-align: center;} 62 .egret-flex-item-shelf div {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} 63 .egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1.1em;} 64 .egret-flex-item-shelf .egret-flex-item-shelf02 {font-size: 0.6em; color: #666; margin-top: 0.6em;} 65 .egret-flex-item-shelf .egret-flex-item-redclassify {color: #E03F40; border: 1px solid #E03F40; font-size: inherit; padding: 0.1em; border-radius: 1px; margin-right: 5px;} 66 67 /* 右部箭头 */ 68 .egret-flex-item-arrow {-webkit-box-flex: 1;max-width: 10px; min-width: 10px; margin-right: 15px;} 69 .egret-flex-item-arrow img {width: 100%; max-width: 10px;} 70 71 /* 暗头部 */ 72 .egret-dark-title {height: 1.4em; line-height: 1.4em; font-size: 0.8em; background-color: #e7e7e7; color: #666; padding-left: 10px;} 73 74 /* special 对个别自定义 */ 75 .special {height: 4em;} 76 .special .egret-flex-item-logo img {height: 3em;width: 3em;} 77 78 /* */ 79 .inputmusic {text-align: center;margin-top: 30px;} 80 .inputmusic p {color: #6F6F6F;} 81 .inputmusic p .inputbtn {color: #3A9DD3;text-decoration: underline;} 82 83 /* 独立条目 */ 84 .isolateitem-top {margin-top: 10px; border-top: 1px solid #e0e0e0; } 85 .isolateitem-bottom {border-bottom: 1px solid #e0e0e0; } 86 87 /* 退出 */ 88 .relationship {margin: 15px 10px;border-radius: 4px;border: 1px solid #D33A31;background-color: #fff;color: #D33A31;text-align: center;height: 2em;line-height: 2em;} 89 90 91 /* 个人用户标题 */ 92 .musiclistprofile {height: 7em; background-color: #fff; } 93 .musiclistprofile .egret-flex-item-logo img {height: 6em; width: 6em; } 94 .musiclistprofile .egret-flex-item-logo {max-width: 6em; min-width: 6em; margin-left: 0.5em; margin-right: 0.2em; -webkit-box-flex: 1; -webkit-box-align: center; } 95 .musiclistprofile .egret-flex-item-shelf {margin-left: 0.5em;} 96 .musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1.5em; } 97 .musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf02 {margin-top: 1.6em;-webkit-box-align: center;display: -webkit-box;} 98 .musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf02 .createrlogo {width: 2em;} 99 .musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf02 .creatername {margin: 0 1em;} 100 .userinfo {display: -webkit-box;background-color: #fff;/*padding: 10px 0;*/} 101 .userinfo .userinfocol {/*-webkit-box-flex:1;*/padding: 10px 0;text-align: center;width: 25%;box-sizing: border-box;} 102 .userinfo .userinfocol .info {font-size: 0.8em;color: #999;} 103 .userinfo .userinfocol .info img {width: 2em;} 104 .userinfo .userinfocol .num {padding-top: 5px;} 105 106 /* 播放全部*/ 107 .playall {background-color: #f9f9f9;} 108 .playall .egret-flex-item-arrow {-webkit-box-flex: 1; max-width: 2.0em; min-width: 2.0em; margin-right: 15px;} 109 .playall .egret-flex-item-arrow img {max-width: none;} 110 .playall .egret-flex-item-logo img {width: 1.5em;height: 1.5em;} 111 112 /* egret item 抽象右部 */ 113 .egret-flex-item-abright {display: -webkit-box; -webkit-box-flex: 1; border-bottom: 1px solid #e0e0e0; -webkit-box-align: center;height: 4em;} 114 115 /* musiclist 特殊样式 */ 116 .musiclist-item {height: 4em;} 117 .musiclist-item .egret-flex-item-logo {text-align: center;font-size: 1.2em;color: #999999;} 118 .musiclist-item .egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1em;} 119 .musiclist-item .egret-flex-item-arrow {max-width: 24px; min-width: 24px;} 120 .musiclist-item .egret-flex-item-arrow img {max-width: none;} 121 122 /* 弹出工具条 */ 123 .musiclist-item-tool {background-color: #303030;color: #fff;display: -webkit-box;padding: 0 10px;display: none;} 124 .musiclist-item-tool .userinfocol {-webkit-box-flex:1;text-align: center;padding: 5px 0;} 125 .musiclist-item-tool .userinfocol .info img {width: 50%;} 126 .musiclist-item-tool .userinfocol .num {color: #A8A8A8;font-size: 0.8em;} 127 128 /* 关注card */ 129 .sharecard {display: -webkit-box;margin-left: 10px;margin-right: 10px;margin-top: 10px;padding: 10px 10px 15px 10px;border: 1px solid #e0e0e0;background-color: #fff;} 130 .sharecard .userlogo {margin-right: 10px;} 131 .sharecard .userlogo img {width: 40px;vertical-align: top;border-radius: 20px;} 132 .sharecard .rightcol {-webkit-box-flex: 1;} 133 .sharecard .rightcol .usertitle {font-size: 0.9em; color: #666;} 134 .sharecard .rightcol .usertitle .username{font-size: 1em; color: #507DAF; margin-right: 5px;} 135 .sharecard .rightcol .usertitle .sharetime{float: right; font-size: 0.6em; color: #999;} 136 .sharecard .rightcol .sharecontent {font-size: 1em; line-height: 1.3em;padding-top: 5px;} 137 .sharecard .rightcol .sharemusic{display: -webkit-box;margin-top: 15px;border: 1px solid #e0e0e0;-webkit-box-align: center;} 138 .sharecard .rightcol .sharemusic .musiclogo {padding: 5px;} 139 .sharecard .rightcol .sharemusic .musiclogo img {vertical-align: top;width: 60px;} 140 .sharecard .rightcol .sharemusic .musictitle {} 141 .sharecard .rightcol .sharemusic .musictitle .title02 {font-size: 0.8em;color: #666;margin-top: 10px;} 142 .sharetool {display: -webkit-box; height: 30px; line-height: 30px; margin: 0 10px 10px 10px;border: 1px solid #e0e0e0; border-top: 0;background-color: #fff;} 143 .sharetool .tool {-webkit-box-flex:1;text-align: center;} 144 .sharetool .tool span {font-size: 0.8em; color: #666;} 145 .sharetool .tool img {width: 16px;vertical-align: top;padding: 7px;} 146 147 /* 悬浮 */ 148 .exitbtnhover {background-color: #d33a31;color: #fff;} 149 .userinfo .toolhover {background-color: #e2e2e2;} 150 .musiclist-item-tool .toolhover {background-color: #1d1d1d;} 151 .allplayhover {background-color: #e2e2e2;} 152 153 </style> 154 </head> 155 <body> 156 157 <div class="egret-flex-item musiclistprofile"> 158 <div class="egret-flex-item-logo"> 159 <img src="../../image/test/frame0103cover02.jpg" alt="" class=""> 160 </div> 161 <div class="egret-flex-item-shelf"> 162 <div class="egret-flex-item-shelf01">老猪</div> 163 <span class="egret-flex-item-shelf02"> 164 <img src="../../image/cm2_list_icn_arr.png" alt="" class="createrlogo"> 165 <div class="creatername">id</div> 166 </span> 167 </div> 168 </div> 169 170 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 171 <div class="title02">个人动态</div> 172 <div class="rightcol"> 173 <div class="sharemusic" tapmode="fmbtnhoverinside" onclick="openDetail()"> 174 <div class="musiclogo"><img src="../../image/test/frame0103cover02.jpg" alt=""></div> 175 <div class="musiclogo"><img src="../../image/test/frame0103cover03.jpg" alt=""></div> 176 <div class="musiclogo"><img src="../../image/test/frame0103cover04.jpg" alt=""></div> 177 </div> 178 </div> 179 </div> 180 181 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 182 <div class="title02">个人签名</div> 183 <div class="rightcol"> 184 <div class="title02"> 185 <span class="username"> </span>我们在行动 186 </div> 187 </div> 188 </div> 189 190 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 191 <div class="title02">情感状态</div> 192 <div class="rightcol"> 193 <div class="title02"> 194 <span class="username"> </span>单身 195 </div> 196 </div> 197 </div> 198 199 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 200 <div class="title02">职业</div> 201 <div class="rightcol"> 202 <div class="title02"> 203 <span class="username"> </span>工程师 204 </div> 205 </div> 206 </div> 207 208 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 209 <div class="title02">家乡</div> 210 <div class="rightcol"> 211 <div class="title02"> 212 <span class="username"> </span>北京 213 </div> 214 </div> 215 </div> 216 217 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 218 <div class="title02">常出没地</div> 219 <div class="rightcol"> 220 <div class="title02"> 221 <span class="username"> </span>北京 222 </div> 223 </div> 224 </div> 225 226 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 227 <div class="title02">兴趣爱好</div> 228 <div class="rightcol"> 229 <div class="title02"> 230 <span class="username"> </span>瞎逛 231 </div> 232 </div> 233 </div> 234 235 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail()"> 236 <div class="title02">注册时间</div> 237 <div class="rightcol"> 238 <div class="title02"> 239 <span class="username"> </span>2015.11.11 240 </div> 241 </div> 242 </div> 243 244 <div class="relationship" id="dddfrient" tapmode="" onclick="addFriend()">好友</div> 245 246 </body> 247 <script type="text/javascript" src="../../script/api.js"></script> 248 <script type="text/javascript" src="../../script/app.js"></script> 249 <script type="text/javascript"> 250 251 function openDetail(){ 252 alert("on click here"); 253 } 254 255 function addFriend(){ 256 alert("addFriend request"); 257 } 258 apiready = function () {} 259 </script> 260 </html>