Skip to content

V
Vphoto
Commit dbef025c by 邓丽
Options

样式调整

parent 02837ab7
Showing with 439 additions and 89 deletions
dist/css/bindDevice.min.css
@charset "UTF-8";*,:after,:before,legend{-webkit-box-sizing:border-box}a,body{color:#353535}.icon:before,a{text-decoration:none}.cover img{width:100%;height:100%;object-fit:cover;object-position:center}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:"PingFang SC","Helvetica Neue",Helvetica,STHeiTi,sans-serif;font-size:14px;line-height:1.5;word-break:break-all;background:#f4f5f9}body,h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0;margin:0;font-weight:lighter}a:active,a:hover{outline-width:0;cursor:pointer}div,footer,h1,h2,h3,h4,h5,h6,header,section,span{font-size:100%}ol,ul{list-style:none}textarea{resize:none;overflow:auto}button,input,select,textarea{outline:0;border:none}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.icon:before,em{font-style:normal}header,header h3 span{text-align:center;height:3.46666667rem;line-height:3.46666667rem}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}.hidden,[hidden],template{display:none}img{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:iconFont;src:url(../fonts/iconFont.eot);src:url(../fonts/iconFont.eot?#iefix) format('eot'),url(../fonts/iconFont.woff2) format('woff2'),url(../fonts/iconFont.woff) format('woff'),url(../fonts/iconFont.ttf) format('truetype'),url(../fonts/iconFont.svg#iconFont) format('svg')}.icon:before{font-family:iconFont;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant:normal;font-weight:400;text-transform:none}.icon-gray:before{content:"\E001"}.icon-icon_blacktel:before{content:"\E002"}.icon-icon_donwpic:before{content:"\E003"}.icon-icon_down:before{content:"\E004"}.icon-icon_eye:before{content:"\E005"}.icon-icon_livepic:before{content:"\E006"}.icon-icon_local:before{content:"\E007"}.icon-icon_more:before{content:"\E008"}.icon-icon_order:before{content:"\E009"}.icon-icon_pen:before{content:"\E00A"}.icon-icon_people:before{content:"\E00B"}.icon-icon_person:before{content:"\E00C"}.icon-icon_picture:before{content:"\E00D"}.icon-icon_redlocal:before{content:"\E00E"}.icon-icon_redphone:before{content:"\E00F"}.icon-icon_return:before{content:"\E010"}.icon-icon_reverse_order:before{content:"\E011"}.icon-icon_right:before{content:"\E012"}.icon-icon_tel:before{content:"\E013"}.icon-icon_tex:before{content:"\E014"}.icon-icon_time:before{content:"\E015"}.icon-icon_type:before{content:"\E016"}.icon-icon_up:before{content:"\E017"}header{background:#434343}header h3{width:100%;text-align:center;margin:0 auto}header h3 .prevPage{display:inline-block;float:left;width:10%;color:red;font-size:.8rem}header h3 .share,header h3 span{display:inline-block;color:#fff}header h3 span{font-size:.96rem;width:80%}header h3 .share{float:right;width:10%;font-size:1.06666667rem}.appointment>ul{padding:0 2.66666667rem}.appointment>ul li{font-size:.8rem;height:2.77333333rem;line-height:2.77333333rem;text-align:left;display:block;clear:both}.appointment>ul li a{display:block;vertical-align:middle;font-size:.8rem}.appointment>ul li:first-child{border-bottom:1px solid #ddd}.appointment .features_intro img{width:100%}.bindEquipment{background:#fff;border:1px solid #ddd;border-left:none;border-right:none}.bindEquipment ul li a input{border:1px solid #ddd;width:7.46666667rem;height:1.22666667rem;line-height:1.22666667rem}.bindEquipment ul li a span{float:right;display:inline-block;vertical-align:middle}.bindEquipment ul li a span b{display:inline-block;font-weight:400;font-size:.69333333rem}.bindEquipment ul li a span i{display:inline-block}
@charset "UTF-8";*,:after,:before,legend{-webkit-box-sizing:border-box}a,body{color:#353535}.icon:before,a{text-decoration:none}.cover img{width:100%;height:100%;object-fit:cover;object-position:center}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:"PingFang SC","Helvetica Neue",Helvetica,STHeiTi,sans-serif;font-size:14px;line-height:1.5;word-break:break-all;background:#f4f5f9}body,h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0;margin:0;font-weight:lighter}a:active,a:hover{outline-width:0;cursor:pointer}div,footer,h1,h2,h3,h4,h5,h6,header,section,span{font-size:100%}ol,ul{list-style:none}textarea{resize:none;overflow:auto}button,input,select,textarea{outline:0;border:none}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.icon:before,em{font-style:normal}header,header h3 span{text-align:center;height:3.46666667rem;line-height:3.46666667rem}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}.hidden,[hidden],template{display:none}img{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:iconFont;src:url(../fonts/iconFont.eot);src:url(../fonts/iconFont.eot?#iefix) format('eot'),url(../fonts/iconFont.woff2) format('woff2'),url(../fonts/iconFont.woff) format('woff'),url(../fonts/iconFont.ttf) format('truetype'),url(../fonts/iconFont.svg#iconFont) format('svg')}.icon:before{font-family:iconFont;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant:normal;font-weight:400;text-transform:none}.icon-gray:before{content:"\E001"}.icon-icon_blacktel:before{content:"\E002"}.icon-icon_donwpic:before{content:"\E003"}.icon-icon_down:before{content:"\E004"}.icon-icon_eye:before{content:"\E005"}.icon-icon_livepic:before{content:"\E006"}.icon-icon_local:before{content:"\E007"}.icon-icon_more:before{content:"\E008"}.icon-icon_order:before{content:"\E009"}.icon-icon_pen:before{content:"\E00A"}.icon-icon_people:before{content:"\E00B"}.icon-icon_person:before{content:"\E00C"}.icon-icon_picture:before{content:"\E00D"}.icon-icon_redlocal:before{content:"\E00E"}.icon-icon_redphone:before{content:"\E00F"}.icon-icon_return:before{content:"\E010"}.icon-icon_reverse_order:before{content:"\E011"}.icon-icon_right:before{content:"\E012"}.icon-icon_shop:before{content:"\E013"}.icon-icon_tel:before{content:"\E014"}.icon-icon_tex:before{content:"\E015"}.icon-icon_time:before{content:"\E016"}.icon-icon_type:before{content:"\E017"}.icon-icon_up:before{content:"\E018"}header{background:#434343}header h3{width:100%;text-align:center;margin:0 auto}header h3 .prevPage{display:inline-block;float:left;width:10%;color:red;font-size:.8rem}header h3 .share,header h3 span{display:inline-block;color:#fff}header h3 span{font-size:.96rem;width:80%}header h3 .share{float:right;width:10%;font-size:1.06666667rem}.appointment>ul{padding:0 2.66666667rem}.appointment>ul li{font-size:.8rem;height:2.77333333rem;line-height:2.77333333rem;text-align:left;display:block;clear:both}.appointment>ul li a{display:block;vertical-align:middle;font-size:.8rem}.appointment>ul li:first-child{border-bottom:1px solid #ddd}.appointment .features_intro img{width:100%}.bindEquipment{background:#fff;border:1px solid #ddd;border-left:none;border-right:none}.bindEquipment ul li a input{border:1px solid #ddd;width:7.46666667rem;height:1.22666667rem;line-height:1.22666667rem}.bindEquipment ul li a span{float:right;display:inline-block;vertical-align:middle}.bindEquipment ul li a span b{display:inline-block;font-weight:400;font-size:.69333333rem}.bindEquipment ul li a span i{display:inline-block}
/*# sourceMappingURL=bindDevice.min.css.map */
dist/css/picture-live.min.css.map
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/fonts/iconFont.eot
No preview for this file type
dist/fonts/iconFont.svg
......@@ -61,20 +61,23 @@
<glyph glyph-name="icon_right"
unicode="&#xE012;"
horiz-adv-x="13" d=" M12.63 11.26L1.992 0.88C1.643 0.508 1.077 0.508 0.727 0.88C0.378 1.252 0.378 1.855 0.727 2.227L10.725 11.981L0.727 21.736C0.378 22.108 0.378 22.711 0.727 23.083C1.077 23.455 1.643 23.455 1.992 23.083L12.63 12.703C12.816 12.504 12.896 12.241 12.883 11.981C12.896 11.722 12.816 11.459 12.63 11.26z" />
<glyph glyph-name="icon_tel"
<glyph glyph-name="icon_shop"
unicode="&#xE013;"
horiz-adv-x="46" d=" M46 38.813C46 39.607 45.356 40.25 44.563 40.25L8.625 40.25L8.625 43.125L10.062 43.125C10.856 43.125 11.5 43.768 11.5 44.563C11.5 45.356 10.856 46 10.062 46L1.438 46C0.643 46 0 45.356 0 44.563C0 43.768 0.643 43.125 1.438 43.125L5.75 43.125L5.75 17.25C5.75 14.074 8.324 11.5 11.5 11.5L14.375 11.5L31.625 11.5L44.563 11.5C44.607 11.5 44.563 12.925 44.563 14.375L11.5 14.375C9.912 14.375 8.625 15.662 8.625 17.25L41.688 20.125C41.688 20.125 46 37.555 46 38.813zM8.625 37.375L8.625 20.125L39.449 22.672L43.125 37.375L8.625 37.375zM37.375 5.75C37.375 2.574 34.801 0 31.625 0C28.449 0 25.875 2.574 25.875 5.75C25.875 8.926 28.449 11.5 31.625 11.5C34.801 11.5 37.375 8.926 37.375 5.75zM31.625 8.625C30.037 8.625 28.75 7.338 28.75 5.75C28.75 4.162 30.037 2.875 31.625 2.875C33.213 2.875 34.5 4.162 34.5 5.75C34.5 7.338 33.213 8.625 31.625 8.625zM20.125 5.75C20.125 2.574 17.551 0 14.375 0C11.199 0 8.625 2.574 8.625 5.75C8.625 8.926 11.199 11.5 14.375 11.5C17.551 11.5 20.125 8.926 20.125 5.75zM14.375 8.625C12.787 8.625 11.5 7.338 11.5 5.75C11.5 4.162 12.787 2.875 14.375 2.875C15.963 2.875 17.25 4.162 17.25 5.75C17.25 7.338 15.963 8.625 14.375 8.625z" />
<glyph glyph-name="icon_tel"
unicode="&#xE014;"
horiz-adv-x="38" d=" M32.909 37.245L36.374 33.765C38.288 31.842 37.367 29.547 36.374 26.803C36.374 26.803 31.609 18.647 25.449 12.459C18.9 5.882 11.25 1.568 11.25 1.568C8.723 0.262 6.233 -0.355 4.32 1.568L0.854 5.048C-0.103 6.01 -0.307 7.722 0.854 8.529L7.785 13.75C8.958 14.548 10.293 14.711 11.25 13.75L11.25 13.75C11.25 13.75 11.25 13.75 11.25 13.75L13.3 11.691C15.703 13.493 18.378 15.688 20.78 18.101C22.905 20.236 24.794 22.55 26.366 24.673L24.245 26.803C23.288 27.764 23.451 29.105 24.245 30.283L29.443 37.245C30.4 38.206 31.952 38.206 32.909 37.245M29.549 24.956L26.766 27.752C26.157 28.364 26.26 29.217 26.766 29.967L30.073 34.397C30.682 35.215 31.67 35.009 32.279 34.397L34.484 32.182C35.349 31.365 35.099 29.46 34.641 28.543C32.595 24.627 28.05 18.597 24.245 14.62C19.858 9.841 9.518 3.308 9.518 3.308C8.719 2.887 6.504 2.855 5.895 3.466L3.69 5.681C3.234 6.447 3.029 7.336 3.69 7.896L8.1 11.219C8.847 11.727 9.696 11.83 10.305 11.219L13.022 8.489C13.663 8.943 23.87 15.681 29.549 24.956z" />
<glyph glyph-name="icon_tex"
unicode="&#xE014;"
unicode="&#xE015;"
horiz-adv-x="28" d=" M23.234 0.659L4.458 0.659C2.153 0.659 0.285 2.526 0.285 4.828L0.285 29.84C0.285 32.143 2.153 34.009 4.458 34.009L16.975 34.009C18.371 34.031 18.927 33.979 19.061 33.979L19.061 34.009L27.406 25.672C27.406 24.141 27.406 23.913 27.406 23.587L27.406 4.828C27.406 2.526 25.538 0.659 23.234 0.659zM19.061 31.925C19.061 29.443 19.061 27.756 19.061 27.756C19.061 26.605 19.995 25.672 21.147 25.672L25.32 25.672L19.061 31.925zM25.32 23.587C22.891 23.587 21.147 23.587 21.147 23.587C18.843 23.587 16.975 25.454 16.975 27.756C16.975 27.756 16.926 29.429 16.945 31.925L4.458 31.925C3.305 31.925 2.371 30.992 2.371 29.84L2.371 4.828C2.371 3.677 3.305 2.744 4.458 2.744L23.234 2.744C24.386 2.744 25.32 3.677 25.32 4.828L25.32 23.587z" />
<glyph glyph-name="icon_time"
unicode="&#xE015;"
unicode="&#xE016;"
horiz-adv-x="34" d=" M16.846 0.875C7.628 0.875 0.156 8.34 0.156 17.55C0.156 26.759 7.628 34.225 16.846 34.225C26.063 34.225 33.535 26.759 33.535 17.55C33.535 8.34 26.063 0.875 16.846 0.875zM16.846 32.14C8.78 32.14 2.242 25.608 2.242 17.55C2.242 9.492 8.78 2.959 16.846 2.959C24.911 2.959 31.449 9.492 31.449 17.55C31.449 25.608 24.911 32.14 16.846 32.14zM27.277 16.508L27.277 18.592L29.363 18.592L29.363 16.508L27.277 16.508zM24.354 9.012L22.878 10.486L24.354 11.96L25.829 10.486L24.354 9.012zM23.184 25.603L24.627 27.048L26.07 25.603L24.627 24.157L23.184 25.603zM15.802 7.128L17.889 7.128L17.889 5.044L15.802 5.044L15.802 7.128zM16.846 16.483L7.458 16.483C6.881 16.483 6.414 16.95 6.414 17.525C6.414 18.101 6.881 18.567 7.458 18.567L15.802 18.567L15.802 29.014C15.802 29.59 16.27 30.056 16.846 30.056C17.422 30.056 17.889 29.59 17.889 29.014L17.889 17.525C17.889 16.95 17.422 16.483 16.846 16.483zM7.316 25.551L8.791 27.025L10.266 25.551L8.791 24.077L7.316 25.551zM10.066 10.43L8.622 8.984L7.179 10.43L8.622 11.875L10.066 10.43z" />
<glyph glyph-name="icon_type"
unicode="&#xE016;"
unicode="&#xE017;"
horiz-adv-x="34" d=" M32.035 15.131L18.261 1.411C16.57 -0.273 13.829 -0.273 12.138 1.411L1.424 12.082C-0.266 13.766 -0.266 16.497 1.424 18.18L15.2 31.901C16.252 33 16.453 33.483 17.557 33.483L31.55 33.483C32.654 33.483 33.549 32.591 33.549 31.491L33.549 17.554C33.549 16.454 32.922 16.015 32.035 15.131zM2.955 13.607L13.669 2.935C14.514 2.094 15.885 2.094 16.73 2.935L18.244 4.444L4.502 18.196L2.955 16.656C2.11 15.814 2.11 14.449 2.955 13.607zM31.55 30.496C31.55 31.046 31.103 31.491 30.551 31.491L18.557 31.491C18.005 31.491 17.221 30.866 16.73 30.376L6.033 19.721L19.791 5.984L30.505 16.656C31.044 17.193 31.55 18 31.55 18.549L31.55 30.496zM20.556 20.467C18.866 22.151 18.866 24.881 20.556 26.565C22.247 28.249 24.988 28.249 26.679 26.565C28.369 24.881 28.369 22.151 26.679 20.467C24.988 18.783 22.247 18.783 20.556 20.467zM25.148 25.041C24.303 25.883 22.932 25.883 22.087 25.041C21.242 24.199 21.242 22.834 22.087 21.992C22.932 21.15 24.303 21.15 25.148 21.992C25.993 22.834 25.993 24.199 25.148 25.041z" />
<glyph glyph-name="icon_up"
unicode="&#xE017;"
unicode="&#xE018;"
horiz-adv-x="18" d=" M7.843 1.158L7.843 23.292L2.374 17.916C1.967 17.516 1.306 17.516 0.899 17.916C0.491 18.316 0.491 18.966 0.899 19.366L8.096 26.441C8.313 26.654 8.601 26.745 8.886 26.731C9.17 26.745 9.459 26.654 9.676 26.441L16.873 19.366C17.28 18.966 17.28 18.316 16.873 17.916C16.466 17.516 15.805 17.516 15.398 17.916L9.929 23.292L9.929 1.158C9.929 0.592 9.462 0.133 8.886 0.133C8.31 0.133 7.843 0.592 7.843 1.158z" />
</font>
</defs>
......
dist/fonts/iconFont.ttf
No preview for this file type
dist/fonts/iconFont.woff
No preview for this file type
dist/html/appoint.html
......@@ -29,36 +29,36 @@
<article>
<ul class="nav nav-tabs col-2">
<li><a class="active">预约摄影师</a></li>
<li><a>购买Wifi-SD卡</a></li>
<li id="shop"><a>购买Wifi-SD卡</a></li>
</ul>
<section id="photographer" class="show">
<div class="appointment">
<!-- <div class="appointment">
<h2>预约关注直播活动摄影师 </h2>
<table>
<tr>
<!-- <th>序号</th>-->
&lt;!&ndash; <th>序号</th>&ndash;&gt;
<th>活动名称</th>
<th>类型</th>
<th>摄影师</th>
<th>马上预约</th>
</tr>
<tr>
<!-- <td>1</td>-->
&lt;!&ndash; <td>1</td>&ndash;&gt;
<td>1.中国网球公开赛中国网球公开赛</td>
<td>体育赛事体育赛事</td>
<td>阿龙阿龙阿龙</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
<tr>
<!--<td>2</td>-->
&lt;!&ndash;<td>2</td>&ndash;&gt;
<td>2.NBA</td>
<td>体育</td>
<td>佚名</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
</table>
</div>
</div>-->
<div class="appointment">
<h2>通过图播天下预约其他服务 </h2>
<p>
......@@ -74,8 +74,8 @@
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="非空" type="text" value="北京" >
<input id="city-picker" onchange="selectCity()"/> <!--此处隐藏域-->
<input id="place" placeholder="北京" type="text" value="北京" name="place" >
<input id="city-picker" /> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
......@@ -142,7 +142,7 @@
</section>
<div class="contactTel">
<a href="tel:400-132-155">
<span>直接联系客服：</span>
<span>直接联系图播天下客服：</span>
<span>400-132-155 </span>
<b class="phone icon icon-icon_tel"></b>
</a>
......@@ -157,10 +157,10 @@
/*选择拍摄地点*/
$("#city-picker").cityPicker({
title: "请选择拍摄地点",
showDistrict: false
/* onChange: function (picker, values, displayValues) {
}*/
showDistrict: false,
onChange: function (picker, values, displayValues) {
$("#place").val(displayValues[1]);
}
});
/*选择拍摄需求*/
......@@ -175,9 +175,6 @@
});
/*选择拍摄时间*/
/* $("#datetime-picker").datetimePicker({
title: "请选择拍摄时间"
});*/
$("#datetime-picker").datetimePicker({
times: function () {
return [
......@@ -208,14 +205,23 @@
}else{
$.alert("您有信息未按要求填写，请检查重填后再提交哦");
}
})
});
function selectCity(){
var Val=$("#city-picker").val();
var city=Val.split(" ");
$("#place").val(city[1]);
}
/*进入页面判断tab*/
$(function(){
var url=window.location.hash;
var str=url.substr(1,url.length);
var _shop=$("#shop");
var _equipment=$('#equipment');
var _photographer=$('#photographer');
if(str=='equipment'){
_shop.find("a").addClass("active");
_shop.siblings("li").find("a").removeClass("active");
_equipment.css("display","block");
_photographer.css("display","none");
}
})
</script>
</body>
......
dist/html/dir-appoint.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--强制竖屏-->
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="screen-orientation" content="portrait">
<meta name="format-detection" content="telephone=no,email=no" >
<meta name="keywords" content="Vphoto,图片直播，企视录，摄影摄像">
<meta name="description" content="Vphoto,图片直播，企视录，摄影摄像">
<title>Vphoto</title>
<link rel="Shortcut Icon" href="../img/logo.png">
<link rel="Bookmark" href="../img/logo.png">
<link rel="stylesheet" href="../../lib/jquery-weui/css/weui.min.css">
<link rel="stylesheet" href="../../lib/jquery-weui/css/jquery-weui.min.css">
<script type="text/javascript" src="../js/flexible.min.js"></script>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/jquery-weui/js/jquery-weui.min.js"></script>
<meta name="format-detection" content="telephone=yes,email=no" >
<link rel="stylesheet" href="../css/appoint.min.css">
</head>
<body>
<article>
<ul class="nav nav-tabs col-1">
<li><a >预约摄影师</a></li>
</ul>
<section>
<div class="appointment">
<h2>预约本场摄影师 <span>飞兔</span> </h2>
<form>
<ul>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<span>北京</span>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<span>15208333748</span>
</li>
<li>
<label class="icon icon-icon_tex"><i></i>服务类型：</label>
<span>活动跟拍</span>
</li>
</ul>
</form>
<div class="submit_btn"><a href="tel:151-9827-3896"><button>马上联系摄影师</button></a></div>
</div>
</section>
<section>
<div class="appointment">
<h2>给摄影师提交需求信息 </h2>
<form action="">
<ul>
<li>
<label class="icon icon-icon_people"><i></i>姓名：</label>
<input type="text" placeholder="可填写字母或汉字" id="name"/>
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="非空" type="text" value="北京" >
<input id="city-picker" onchange="selectCity()"/> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
<input type="text" id='picker' placeholder="非空" value="会议直播"/>
</li>
<li>
<label class="icon icon-icon_time"><i></i>时间：</label>
<input type="text" id='datetime-picker' placeholder="非空" value="2017-2-10 16:54"/>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<input type="tel" placeholder="只能填写数字" id="tel"/>
</li>
</ul>
<div class="submit_btn" id="submit_form"><button>确认提交</button></div>
</form>
<p>
提交需求信息后摄影师将在24小时内跟您联系，如果摄影师未联系您，我们将通知摄影师
</p>
</div>
</section>
<div class="contactTel">
<a href="tel:400-132-155">
<span>直接联系图播天下客服：</span>
<span>400-132-155 </span>
<b class="phone icon icon-icon_tel"></b>
</a>
</div>
</article>
<script src="../../lib/hammer.js/hammer.min.js"></script>
<script src="../js/appoint.min.js"></script>
<script type="text/javascript" src="../../lib/jquery-weui/js/city-picker.min.js" charset="utf-8"></script>
<script>
/*选择拍摄地点*/
$("#city-picker").cityPicker({
title: "请选择拍摄地点",
showDistrict: false,
onChange: function (picker, values, displayValues) {
$("#place").val(displayValues[1]);
}
});
/*选择拍摄需求*/
$("#picker").picker({
title: "请选择服务需求",
cols: [
{
textAlign: 'center',
values: ['会议直播', '婚礼纪实', '企业宣传片', '课程教学', '产品发布会', '培训']
}
]
});
/*选择拍摄时间*/
$("#datetime-picker").datetimePicker({
times: function () {
return [
{
values: []
}
];
},
value: '2012-12-12 ',
onChange: function (picker, values, displayValues) {
/* console.log(values);*/
}
});
/*表单验证*/
$('.submit_btn').click(function(){
var nameChecked=/^[a-z\u4E00-\u9FA5]+$/g.test($("#name").val());
var telChecked=/^[0-9]+$/g.test($("#tel").val());
if(nameChecked&&$("#place").val()&&$("#picker").val()&&$("#datetime-picker").val()&&telChecked){
$.alert("资料已提交，客服会尽快联系您哒");
$.alert({
title: '提示',
text: '资料已提交，客服会尽快联系您哒',
onOK: function () {
$('form').submit();
}
});
}else{
$.alert("您有信息未按要求填写，请检查重填后再提交哦");
}
});
</script>
</body>
</html>
dist/html/picture-live.html
......@@ -288,11 +288,16 @@
<!--预约摄影师-->
<section class="appointment">
<a href="./appoint.html">
<span>马上预约本场摄影师 飞兔</span>
<span class="appointUser">马上预约本场摄影师 飞兔</span>
<!--单场次预约按钮-->
<!-- <span>马上预约</span>-->
</a>
<a href="./appoint.html#equipment">
<span class="shop">
<i class="icon icon-icon_shop"></i>
<small>购买直播设备</small>
</span>
</a>
</section>
</article>
......@@ -372,16 +377,6 @@
if(Wwidth<Swidth){
Swidth=Wwidth;
}
/* if(len<2){
Room.css('display','none');
}else if(len==2){
Room.addClass('twoLi');
}else if(len>=3){
Room.removeClass('twoLi');
var ulWidth=parseFloat(((len*liWidth+10)*100)/Swidth).toFixed(2);
Ul.width(ulWidth+'%');
}*/
if(len<2){
Room.css('display','none');
}else{
......@@ -400,11 +395,11 @@
$("#updateItem").animate({"top":"3.34rem"},500);
setTimeout(function() {
$("#updateItem").animate({"top":"0"},500);
},3000);
},2000);
}else{
$("#updateItem").animate({"top":"0"},500);
}
},600000);
},20000);
</script>
</body>
......
src/img/icon/icon_shop.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="46" height="46" viewBox="0 0 46 46">
<defs>
<style>
.cls-1 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<path d="M46.000,7.187 C46.000,6.393 45.356,5.750 44.563,5.750 L8.625,5.750 L8.625,2.875 L10.062,2.875 C10.856,2.875 11.500,2.232 11.500,1.437 C11.500,0.644 10.856,-0.000 10.062,-0.000 L1.438,-0.000 C0.643,-0.000 -0.000,0.644 -0.000,1.437 C-0.000,2.232 0.643,2.875 1.438,2.875 L5.750,2.875 L5.750,28.750 C5.750,31.926 8.324,34.500 11.500,34.500 L14.375,34.500 L31.625,34.500 L44.563,34.500 C44.607,34.500 44.563,33.075 44.563,31.625 L11.500,31.625 C9.912,31.625 8.625,30.338 8.625,28.750 L41.688,25.875 C41.688,25.875 46.000,8.445 46.000,7.187 ZM8.625,8.625 L8.625,25.875 L39.449,23.328 L43.125,8.625 L8.625,8.625 ZM37.375,40.250 C37.375,43.426 34.801,46.000 31.625,46.000 C28.449,46.000 25.875,43.426 25.875,40.250 C25.875,37.074 28.449,34.500 31.625,34.500 C34.801,34.500 37.375,37.074 37.375,40.250 ZM31.625,37.375 C30.037,37.375 28.750,38.662 28.750,40.250 C28.750,41.838 30.037,43.125 31.625,43.125 C33.213,43.125 34.500,41.838 34.500,40.250 C34.500,38.662 33.213,37.375 31.625,37.375 ZM20.125,40.250 C20.125,43.426 17.551,46.000 14.375,46.000 C11.199,46.000 8.625,43.426 8.625,40.250 C8.625,37.074 11.199,34.500 14.375,34.500 C17.551,34.500 20.125,37.074 20.125,40.250 ZM14.375,37.375 C12.787,37.375 11.500,38.662 11.500,40.250 C11.500,41.838 12.787,43.125 14.375,43.125 C15.963,43.125 17.250,41.838 17.250,40.250 C17.250,38.662 15.963,37.375 14.375,37.375 Z" class="cls-1"/>
</svg>
src/less/appoint.less
......@@ -16,6 +16,7 @@
/*预约摄影师*/
.appointment{
.px1rem(margin-bottom,40);
h2{
.text-center(84);
.px1rem(font-size,32);
......@@ -162,6 +163,7 @@
background: @bg-white;
color: @txt-light-black;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
text-align: center;
.phone{
display: inline-block;
......
src/less/iconfont/iconfont.less
......@@ -93,23 +93,27 @@
content: "\E012";
}
.icon-icon_tel:before {
.icon-icon_shop:before {
content: "\E013";
}
.icon-icon_tex:before {
.icon-icon_tel:before {
content: "\E014";
}
.icon-icon_time:before {
.icon-icon_tex:before {
content: "\E015";
}
.icon-icon_type:before {
.icon-icon_time:before {
content: "\E016";
}
.icon-icon_up:before {
.icon-icon_type:before {
content: "\E017";
}
.icon-icon_up:before {
content: "\E018";
}
\ No newline at end of file
src/less/picture-live.less
......@@ -295,15 +295,36 @@ nav{
/* .px1rem(left,0);*/
.px1rem(bottom,0);
.px1rem(width,750);
/* width: 100%;*/
span{
display: block;
width: 100%;
.text-center(100);
background: @txt-light-grey;
float: left;
}
.appointUser{
width: 70%;
background: @txt-red;
color: @txt-white;
.px1rem(font-size,36);
font-weight:lighter;
.text-center(100);
}
.shop{
width:30%;
background: @txt-light-grey;
color: #e4e4e4;
text-align: center;
.px1rem(height,100);
overflow: hidden;
i{
display: inline-block;
.px1rem(font-size,80);
.px1rem(margin-top,-5);
.px1rem(line-height,40);
}
small{
display: block;
.px1rem(line-height,50);
.px1rem(margin-top,10);
}
}
}
......
src/less/ui-widget/nav-tabs.less
......@@ -4,9 +4,15 @@
> li {
float: left;
text-align: center;
color: #fff;
}
}
.nav.col-1 {
li {
/* .px1rem(width, 375);*/
width:100%;
}
}
.nav.col-2 {
li {
/* .px1rem(width, 375);*/
......@@ -31,7 +37,7 @@
.px1rem(height,126);
.px1rem(line-height,126);
.px1rem(font-size, 30);
color: @txt-grey;
color: @txt-white;
.px1rem(font-size,36);
.px1rem(width,250);
}
......
src/pages/appoint.ejs
......@@ -9,36 +9,36 @@
<article>
<ul class="nav nav-tabs col-2">
<li><a class="active">预约摄影师</a></li>
<li><a>购买Wifi-SD卡</a></li>
<li id="shop"><a>购买Wifi-SD卡</a></li>
</ul>
<section id="photographer" class="show">
<div class="appointment">
<!-- <div class="appointment">
<h2>预约关注直播活动摄影师 </h2>
<table>
<tr>
<!-- <th>序号</th>-->
&lt;!&ndash; <th>序号</th>&ndash;&gt;
<th>活动名称</th>
<th>类型</th>
<th>摄影师</th>
<th>马上预约</th>
</tr>
<tr>
<!-- <td>1</td>-->
&lt;!&ndash; <td>1</td>&ndash;&gt;
<td>1.中国网球公开赛中国网球公开赛</td>
<td>体育赛事体育赛事</td>
<td>阿龙阿龙阿龙</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
<tr>
<!--<td>2</td>-->
&lt;!&ndash;<td>2</td>&ndash;&gt;
<td>2.NBA</td>
<td>体育</td>
<td>佚名</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
</table>
</div>
</div>-->
<div class="appointment">
<h2>通过图播天下预约其他服务 </h2>
<p>
......@@ -54,8 +54,8 @@
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="非空" type="text" value="北京" >
<input id="city-picker" onchange="selectCity()"/> <!--此处隐藏域-->
<input id="place" placeholder="北京" type="text" value="北京" name="place" >
<input id="city-picker" /> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
......@@ -107,7 +107,7 @@
</section>
<div class="contactTel">
<a href="tel:400-132-155">
<span>直接联系客服：</span>
<span>直接联系图播天下客服：</span>
<span>400-132-155 </span>
<b class="phone icon icon-icon_tel"></b>
</a>
......@@ -122,10 +122,10 @@
/*选择拍摄地点*/
$("#city-picker").cityPicker({
title: "请选择拍摄地点",
showDistrict: false
/* onChange: function (picker, values, displayValues) {
}*/
showDistrict: false,
onChange: function (picker, values, displayValues) {
$("#place").val(displayValues[1]);
}
});
/*选择拍摄需求*/
......@@ -140,9 +140,6 @@
});
/*选择拍摄时间*/
/* $("#datetime-picker").datetimePicker({
title: "请选择拍摄时间"
});*/
$("#datetime-picker").datetimePicker({
times: function () {
return [
......@@ -173,14 +170,23 @@
}else{
$.alert("您有信息未按要求填写，请检查重填后再提交哦");
}
})
});
function selectCity(){
var Val=$("#city-picker").val();
var city=Val.split(" ");
$("#place").val(city[1]);
}
/*进入页面判断tab*/
$(function(){
var url=window.location.hash;
var str=url.substr(1,url.length);
var _shop=$("#shop");
var _equipment=$('#equipment');
var _photographer=$('#photographer');
if(str=='equipment'){
_shop.find("a").addClass("active");
_shop.siblings("li").find("a").removeClass("active");
_equipment.css("display","block");
_photographer.css("display","none");
}
})
</script>
</body>
......
src/pages/dir-appoint.ejs 0 → 100644
<!DOCTYPE html>
<html>
<head>
<% include ./common/head.ejs %>
<meta name="format-detection" content="telephone=yes,email=no" >
<link rel="stylesheet" href="../css/appoint.min.css">
</head>
<body>
<article>
<ul class="nav nav-tabs col-1">
<li><a >预约摄影师</a></li>
</ul>
<section>
<div class="appointment">
<h2>预约本场摄影师 <span>飞兔</span> </h2>
<form>
<ul>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<span>北京</span>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<span>15208333748</span>
</li>
<li>
<label class="icon icon-icon_tex"><i></i>服务类型：</label>
<span>活动跟拍</span>
</li>
</ul>
</form>
<div class="submit_btn"><a href="tel:151-9827-3896"><button>马上联系摄影师</button></a></div>
</div>
</section>
<section>
<div class="appointment">
<h2>给摄影师提交需求信息 </h2>
<form action="">
<ul>
<li>
<label class="icon icon-icon_people"><i></i>姓名：</label>
<input type="text" placeholder="可填写字母或汉字" id="name"/>
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="非空" type="text" value="北京" >
<input id="city-picker" onchange="selectCity()"/> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
<input type="text" id='picker' placeholder="非空" value="会议直播"/>
</li>
<li>
<label class="icon icon-icon_time"><i></i>时间：</label>
<input type="text" id='datetime-picker' placeholder="非空" value="2017-2-10 16:54"/>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<input type="tel" placeholder="只能填写数字" id="tel"/>
</li>
</ul>
<div class="submit_btn" id="submit_form"><button>确认提交</button></div>
</form>
<p>
提交需求信息后摄影师将在24小时内跟您联系，如果摄影师未联系您，我们将通知摄影师
</p>
</div>
</section>
<div class="contactTel">
<a href="tel:400-132-155">
<span>直接联系图播天下客服：</span>
<span>400-132-155 </span>
<b class="phone icon icon-icon_tel"></b>
</a>
</div>
</article>
<script src="../../lib/hammer.js/hammer.min.js"></script>
<script src="../js/appoint.min.js"></script>
<script type="text/javascript" src="../../lib/jquery-weui/js/city-picker.min.js" charset="utf-8"></script>
<script>
/*选择拍摄地点*/
$("#city-picker").cityPicker({
title: "请选择拍摄地点",
showDistrict: false,
onChange: function (picker, values, displayValues) {
$("#place").val(displayValues[1]);
}
});
/*选择拍摄需求*/
$("#picker").picker({
title: "请选择服务需求",
cols: [
{
textAlign: 'center',
values: ['会议直播', '婚礼纪实', '企业宣传片', '课程教学', '产品发布会', '培训']
}
]
});
/*选择拍摄时间*/
$("#datetime-picker").datetimePicker({
times: function () {
return [
{
values: []
}
];
},
value: '2012-12-12 ',
onChange: function (picker, values, displayValues) {
/* console.log(values);*/
}
});
/*表单验证*/
$('.submit_btn').click(function(){
var nameChecked=/^[a-z\u4E00-\u9FA5]+$/g.test($("#name").val());
var telChecked=/^[0-9]+$/g.test($("#tel").val());
if(nameChecked&&$("#place").val()&&$("#picker").val()&&$("#datetime-picker").val()&&telChecked){
$.alert("资料已提交，客服会尽快联系您哒");
$.alert({
title: '提示',
text: '资料已提交，客服会尽快联系您哒',
onOK: function () {
$('form').submit();
}
});
}else{
$.alert("您有信息未按要求填写，请检查重填后再提交哦");
}
});
</script>
</body>
</html>
src/pages/picture-live.ejs
......@@ -128,11 +128,16 @@
<!--预约摄影师-->
<section class="appointment">
<a href="./appoint.html">
<span>马上预约本场摄影师 飞兔</span>
<span class="appointUser">马上预约本场摄影师 飞兔</span>
<!--单场次预约按钮-->
<!-- <span>马上预约</span>-->
</a>
<a href="./appoint.html#equipment">
<span class="shop">
<i class="icon icon-icon_shop"></i>
<small>购买直播设备</small>
</span>
</a>
</section>
</article>
......@@ -212,16 +217,6 @@
if(Wwidth<Swidth){
Swidth=Wwidth;
}
/* if(len<2){
Room.css('display','none');
}else if(len==2){
Room.addClass('twoLi');
}else if(len>=3){
Room.removeClass('twoLi');
var ulWidth=parseFloat(((len*liWidth+10)*100)/Swidth).toFixed(2);
Ul.width(ulWidth+'%');
}*/
if(len<2){
Room.css('display','none');
}else{
......@@ -240,11 +235,11 @@
$("#updateItem").animate({"top":"3.34rem"},500);
setTimeout(function() {
$("#updateItem").animate({"top":"0"},500);
},3000);
},2000);
}else{
$("#updateItem").animate({"top":"0"},500);
}
},600000);
},20000);
</script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment