ydui实现移动端手机端服务订单评价页面效果代码
代码语言:html
所属分类:布局界面
代码描述:ydui实现移动端手机端服务订单评价页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no, email=no, date=no, address=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="Pragma" content="no-cache"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ydui.css"> <style> .padding02 { padding: .2rem; } .margin02 { margin: .2rem; } .colorblue { color: #007AFF; } .bgwhite { background: #FFFFFF; } .Start_scrollview { margin-bottom: 1rem!important; } .demo-icon { background-size: 2.2rem 1.7rem; width: .5rem; height: .5rem; display: block; } .tabbar-active .demo-icon.hallicon { background-position: -0.1rem -0.13rem; } .demo-icon.hallicon { background-position: -0.1rem -0.95rem; } .demo-icon.businessicon { background-position: -0.83rem -0.95rem; } .demo-icon.usericon { background-position: -1.55rem -0.95rem; } .tabbar-active .demo-icon.hallicon { background-position: -0.1rem -0.13rem; } .tabbar-active .demo-icon.businessicon { background-position: -0.83rem -0.10rem; } .tabbar-active .demo-icon.usericon { background-position: -1.55rem -0.10rem; } /************大厅介绍样式****************/ .title_hall { height: .5rem; margin-bottom: .1rem; font-size: .32rem; line-height: .7rem; } .icon_title { background: url(//repo.bfw.wiki/bfwrepo/image/606afc1a62ae5.png) no-repeat center; background-size: cover; display: block; float: left; height: .5rem; width: .5rem; margin-right: .15rem; } .hall_content { position: relative; z-index: 1; padding-top: .8rem; } .hall_content .content_present { border: 2px solid #eaa700; padding: .15rem; box-shadow: .1rem .1rem 0rem rgba(193, 89, 0, 0.3); background: #FFFFFF; line-height: .45rem; font-size: .3rem; position: relative; z-index: 1; } .content_present::before { content: ''; position: absolute; z-index: 11; top: -0.8rem; left: -2px; border-left: 0rem solid transparent; border-right: 1.2rem solid transparent; border-bottom: .8rem solid #eaa700; } .content_present::after { content: ''; position: absolute; z-index: 12; top: -0.7rem; left: 0; border-left: 0rem solid transparent; border-right: 1.19rem solid transparent; border-bottom: .8rem solid #FFFFFF; } /***************************************/ .Service_type { height: 1rem; background: #FFFFFF; line-height: 1rem; padding: 0 .2rem; white-space: nowrap; } .Service_type .departmentname { line-height: 01rem; display: inline-block; border-bottom: 0; padding: 0 .2rem; overflow: hidden; -webkit-transition: background-color .1s linear; transition: background-color .1s linear; text-align: center; white-space: nowrap; text-overflow: ellipsis; } .Service_type .department-scroll { transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) translateZ(0px); } .Service_type .departmentname .active { color: #007aff; border-bottom: 2px solid #007aff; display: block; width: auto; } .servicelist .iconimg img { width: 100%; } .servicelist .grids-icon { height: 1.5rem; margin-bottom: .2rem; padding: 0 .1rem; } .servicelist.m-grids-4 { background: none; font-size: .25rem; } .servicelist .grids-txt { font-size: .25rem; height: 1.2rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; box-sizing: border-box; white-space: initial } .servicelist.m-grids-4 .grids-item:not(:nth-child(4n)):before, .servicelist.m-grids-4:before, .servicelist .grids-item:after { border: 0px; border-bottom: 0px; border-right: 0px; } .service_detailed .service_title { height: .8rem; position: relative; z-index: 1; } .service_detailed .service_title .name { position: absolute; padding: .1rem .2rem; left: -0.1rem; z-index: 11; font-size: .3rem; top: .1rem } .service_detailed .service_title .name:before { content: ''; position: absolute; top: .5rem; left: 0rem; border-left: .1rem solid transparent; border-right: 0rem solid transparent; } .btn-bule { background-color: #1b89ea; color: #FFF; } .service_detailed .cell-left { color: #999999; } .service_detailed .service_title .badge-danger.name:before { border-top: .2rem solid #bb1a1a; } .service_detailed .service_title .badge-primary.name:before { border-top: .2rem solid #026d01; } .service_detailed .service_title .badge-hollow.name:before { border-top: .2rem solid #eaa700; } .service_detailed .service_title .badge-bule.name:before { border-top: .2rem solid #007AFF; } .service_detailed .service_title .badge-warning.name:before { border-top: .2rem solid #c78d00; } .service_detailed .fwillustrate { line-height: .5rem; } .material_title { font-size: .4rem; } .policylist {} .policyimg { width: 2.5rem; height: 2.5rem; margin: 0.2rem 0; } .policylist .cell-right { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; margin-left: .2rem; position: relative; z-index: 11; font-size: .3rem; } .policylist .cell-right .policytime { position: absolute; left: .2rem; bottom: .2rem; z-index: 12; color: #888888; font-size: .3rem; font-weight: normal; } .policylist .cell-right .title_name { height: 1.5rem; line-height: .5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; box-sizing: border-box; display:block; } .title_hall .icon { background-size: .75rem .75rem; background-position: -0.1rem -0.15rem; display: block; float: left; height: .5rem; width: .5rem; margin-right: .15rem; } .announcement .cell-left { font-size: .2rem; width: 75%; overflow: hidden; line-height: .4rem; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; } .not_processed { background: #f1f3ff; } .processed { box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: .2rem; margin-bottom: .3rem; position: relative; z-index: 9; } .processed .processed-left { width: 70%; float: left; font-size: .3rem; position: relative; z-index: 11; line-height: .5rem; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; white-space: nowrap; display: -webkit-flex; } .processed .processed-left:before { content: ""; position: absolute; right: 0; height: 80%; top: 10%; border-right: 1px solid #FFFFFF; z-index: 12; } .processed .processed-right { width: 30%; float: left; text-align: right; font-size: .3rem; line-height: .4rem; } .processed .processed-right h4 { font-weight: normal; color: #999999; } .processed .schedulebtn { border: 1px solid #007AFF; color: #007AFF; } .modestyle { width: 1rem; height: 1rem; position: absolute; top: 0; left: 0px; overflow: hidden; z-index: 1; } .pro-type { display: inline-block; text-align: center; width: 1rem; height: 1rem; position: absolute; top: -5px; left: 0px; z-index: 2; overflow: hidden; } .ribbon6 { background: url(../images/xx_16.png) no-repeat; background-size: 100% 100%; color: #FFF; font-size: .25rem; } .pro-type span { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); overflow: hidden; display: inline-block; text-align: center; position: absolute; z-index: 12; top: .25rem; left: 0rem; } .inprogress .processed-left { padding-left: .5rem; } .announcementstyle .title_name { font-size: .35rem; font-weight: bold; text-align: center; margin-bottom: .2rem; } .announcementstyle .releasetime { color: #999999; text-align: center; font-size: .3rem; margin-bottom: .3rem; } .announcementstyle .releasecontent { font-size: .3rem; line-height: .5rem; } .schedulebtnbtn { float: right; border: 1px solid #007AFF; text-align: center; border-radius: .1rem; color: #007AFF; height: .5rem; line-height: .5rem; margin-top: .2rem; width: 1rem; } input[type=checkbox].ace, input[type=radio].ace { opacity: 0; position: absolute; z-index: 12; width: 16px; height: 16px; cursor: pointer; top: 0px; left: 0px; margin: 0px; } .appraisal_level .SelectionBox, .appraisal_score .SelectionBox { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #979797; } .appraisal_level .SelectionBox { height: 2rem; } .appraisal_score .SelectionBox { height: .5rem; width: .5rem; margin: 0rem 0.1rem; } .appraisal_level .cell-item, .appraisal_score .cell-item { padding: 0; } .appraisal_level .SelectionBox input[type=checkbox].ace+.lbl, .appraisal_level .SelectionBox input[type=radio].ace+.lbl, .appraisal_score .SelectionBox input[type=checkbox].ace+.lbl, .appraisal_score .SelectionBox input[type=radio].ace+.lbl { position: relative; z-index: 11; display: inline-block; margin: 0; width: 100%; text-align: center; font-weight: normal; margin-top: 0px; top: 0px; } .appraisal_level .SelectionBox input[type=checkbox].ace+.lbl, .appraisal_level .SelectionBox input[type=radio].ace+.lbl { line-height: 3rem; min-height: 2rem; } .appraisal_score .SelectionBox input[type=checkbox].ace+.lbl, .appraisal_score .SelectionBox input[type=radio].ace+.lbl { line-height: .5rem; min-height: .5rem; font-size: 0px; } .appraisal_level .SelectionBox input[type=checkbox].ace+.lbl::before, .appraisal_level .SelectionBox input[type=radio].ace+.lbl::before, .appraisal_score .SelectionBox input[type=checkbox].ace+.lbl::before, .appraisal_score .SelectionBox input[type=radio].ace+.lbl::before { font-family: iconfont; font-weight: normal; position: absolute; z-index: 11; color: #333333; content: ""; border-radius: 0; display: block; text-align: center; } .appraisal_level .SelectionBox input[type=checkbox].ace+.lbl::before, .appraisal_level .SelectionBox input[type=radio].ace+.lbl::before { top: .2rem; left: 50%; margin-left: -0.5rem; height: 1.2rem; font-size: 12px; line-height: 1rem; min-width: 1rem; background: url(//repo.bfw.wiki/bfwrepo/image/60d1d1cd7bedd.png) no-repeat; background-size: 5.2rem 2.5rem; } .appraisal_score .SelectionBox input[type=checkbox].ace+.lbl::before, .appraisal_score .SelectionBox input[type=radio].ace+.lbl::before { height: .5rem; top: 0rem; line-height: .5rem; font-size: 0px; min-width: .5rem; background: url(../images/detail-iocn001.png) no-repeat; background-size: 0.5rem 0.5rem; } .appraisal_score .SelectionBox input[type=checkbox].ace+.lbl.clibg::before, .appraisal_score .SelectionBox input[type=radio].ace+.lbl.clibg::before, .appraisal_score .SelectionBox input[type=radio].ace:checked+.lbl::before, .appraisal_score .SelectionBox input[type=checkbox].ace:checked+.lbl::before { background: url(../images/detail-iocn01.png) no-repeat; background-size: 0.5rem 0.5rem; } .appraisal_level .SelectionBox input[type=radio].ace+.Selectstyle0::before { background-position: -4.2rem 0rem; } .appraisal_level .SelectionBox input[type=radio].ace+.Selectstyle1::before { background-position: -2.75rem 0rem; } .appraisal_level .SelectionBox input[type=radio].ace+.Selectstyle2::before { background-position: -1.4rem 0rem; } .appraisal_level .SelectionBox input[type=radio].ace+.Selectstyle3::before { background-position: -0.03rem 0rem; } .appraisal_level .SelectionBox input[type=radio].ace:checked+.Selectstyle0::before { background-position: -4.2rem -1.48rem; } .appraisal_level .SelectionBox input[type=radio].ace:checked+.Selectstyle1::before { background-position: -2.78rem -1.4rem; } .appraisal_level .SelectionBox input[type=radio].ace:checked+.Selectstyle2::before { background-position: -1.4rem -1.45rem; } .appraisal_level .SelectionBox input[type=radio].ace:checked+.Selectstyle3::before { background-position: -0.03rem -1.43rem; } .keyword { text-align: center; min-height: 1rem; padding: .2rem; } .keyword .SelectionBox { height: .7rem; display: block; float: left; position: relative; z-index: 1; } .form-textarea { width: 100%; height: 3rem; border-color: #DDDDDD; padding: .2rem; } .appraisalstyle .word_count { color: #D74747; font-size: .3rem; } .keyword .SelectionBox input[type=checkbox].ace+.lbl { border: 1px solid #007AFF; color: #007AFF; padding: .1rem .2rem; border-radius: .2rem; margin: 0 .1rem; } .keyword .SelectionBox input[type=checkbox].ace:checked+.lbl { background-color: #007AFF; color: #FFFFFF; } /*******************订单信息***************************/ .product_order .list-item .list-img { width: 2rem; padding: 1rem 0; } .product_order .list-item .list-mes { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-left: 7px; } .product_order .list-item { overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 7px 0 8px 0; position: relative; } .product_order .list-mes .list-title { font-weight: 400; } .product_order .list-mes-item { margin-top: .2rem; } .appraisal_score .cell-left { width: auto; line-height: initial; color: #999999; } .appraisal_score .attitude { width: 1.5rem; overflow: hidden; color: #F23030; line-height: .4rem; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ydui.flexible.js"></script> <title></title> </head> <body> <section class="g-flexview"> <header class="m-navbar"> <a href="asidebar.html" class="navbar-item"><i class="back-ico"></i></a> <div class="navbar-center"> <span class="navbar-title">评价</span> </div> </header> <section class="g-scrollview Start_scrollview"> <div class="title_hall margin02"> <i class="icon_title"></i>评价 </div> <div class="m-cell announcement"> <ul class="appraisalstyle" id="appraisal"> <li class="appraisal_level"> <span class="Required cell-item" data-key="satisfied" data-type="satisfied" data-Array="非常满意,满意,一般,不满意" data-value="0" data-method="SelectionBox" data-mode="radio"> </span> </li> <li class="keyword clearfix"> <span class="Required info_data" data-key="keyword" data-type="keyword" data-Array="服务周到,效率高,处理快,温馨解答问题,服务满意,服务态度恶劣" data-value="" data-method="SelectionBox" data-mode="checkbox"> </span> </li> <li class="padding02 "> <textarea data-name="评价内容" id="textarea" data-prompt="text_content" data-type="summary" data-key="summary" data-verify="verify" data-stint="Wordcount" size="300" class="Required form-textarea col-sm-12 textarea height100 mr10" placeholder="请对服务做个简单评价"></textarea> </li> <li class="padding02"> <button type="button" class="btn-block btn-bule" id="modifybtn1">发布</button> </li> <li class="jsoncontent" id="jsoncontent"> </li> </ul> </div> </section> </section> </body> </html> <script type="text/javascript"> /* * SYSUI-verification1.5 * 2019-06-11 * 799129700@qq.com SYSHUXL-化海天堂 www.husysui.com * Reserved head available commercial use * Universal background system interface framework */ //合并 function extend(o, n, override) { for (var key in n) { if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) { o[key] = n[key]; } } return o; }; //处理 function addLoadListener(fn) { if (typeof window.addEventListener != 'undefined') { window.addEventListener('load', fn, false); } else if (typeof document.addEventListener != 'undefined') { document.addEventListener('load', fn, false); } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onload', fn); } else { var oldfn = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldfn(); fn(); }; } } }; //简化document.getElementById方法 function ID$(i) { return document.getElementById(i) }; //简化document.createElement方法 function LABEL$(i) { return document.createElement(i) }; //简化document.getElementsByName方法 function NAME$(i) { return document.getElementsByName(i) } function TAGNAME$(i) { return document.getElementsByTagName(i) } // 插件构造函数 - 返回数组结构 function SYSVerification(options) { this._initial(options); }; //添加属性和方法 SYSVerification.prototype = { constructor: this, //创建方法 _initial: function(options) { //创建属性 var par = { Verification: '', //指定验证区域 Submit: '', //提交名 Icon: '', Empty: '', keyCode: null, //是否回车触发 Transform: true, Passwordlength: 6, Checkbox: true, SelectionBox: ".SelectionBox", DataSource: null, Mixedkey: false, //是否启用混合将关键字转换为不可识别的字符 Editmode: '', //编辑模式 Loading: '<div class="padding05">加载中......</div>', //加载样式设置 Verify_Promptcode: 101, //验证码返回数字 ConfirmCode: 202, //确认返回数字 FailureCode: 102, //失败认证码 FailurePrompt: '', //请求失败提示 CkPrompt: false, //是否启用搜索提示信息 Load: function() {}, //载入数据方法 Formmode: "submitmode", //submitmode提交模式,loadmode加载模式 SelectEvent: function() {}, ConfirmCallback: function() {}, //确认回调方法 SubmitMethod: function() {}, //提交操作 Expand: function() {}, Complete: function() {}, //页面加载完成在执行 ExtendMethod: function() {}, Loadselect: function() {}// }; this.par = extend(par, options, true); //判断是否存在class属性方法 this.hasClass = function(elements, cName) { return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)")); } //添加class属性方法 this.addClass = function(elements, cName) { if (!this.hasClass(elements, cName)) { elements.className += " " + cName; }; }; //删除class属性方法 elements当前结构 cName类名 this.removeClass = function(elements, cName) { if (this.hasClass(elements, cName)) { elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换 }; }; //根据class类名条件筛选结构 this.getElementsByClassName = function(parent, className) { var aEls = parent.getElementsByTagName("*"); //获取所有父节点下的tag元素 var arr = []; //循环所有tag元素 for (var i = 0; i < aEls.length; i++) { //将tag元素所包含的className集合(这里指一个元素可能包含多个class)拆分成数组,赋值给aClassName var aClassName = aEls[i].className.split(' '); //遍历每个tag元素所包含的每个className for (var j = 0; j < aClassName.length; j++) { //如果符合所选class,添加到arr数组 if (aClassName[j] == className) { arr.push(aEls[i]); //如果className里面包含'box' 则跳出循环 break; //防止一个元素出现多次相同的class被添加多次 } }; }; return arr; }; //根据class类名条件筛选结构 this.getByClass = function(oParent, sClass) { //根据class获取元素 var oReasult = []; var oEle = oParent.getElementsByTagName("*"); for (i = 0; i < oEle.length; i++) { if (oEle[i].className == sClass) { oReasult.push(oEle[i]); } }; return oReasult; }; //删除指定_element方法 this.removeElement = function(_element) { var _parentElement = _element.parentNode; if (_parentElement) { _parentElement.removeChild(_element); }; }; this.par.Expand(this); this.show(this.par); }, //将big-endian单词数组转换为base-64字符 binb2b64: function(binarray) { var b64pad = ""; var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var str = ""; if (binarray != undefined) { for (var i = 0; i < binarray.length * 4; i += 3) { var triplet = (((binarray[i >> 2] >> 8 * (3 - i % 4)) & 0xFF) << 16) | (((binarray[i + 1 >> 2] >> 8 * (3 - (i + 1) % 4)) & 0xFF) << 8) | ((binarray[i + 2 >> 2] >> 8 * (3 - (i + 2) % 4)) & 0xFF); for (var j = 0; j < 4; j++) { if (i * 8 + j * 6 > binarray.length * 32) str += b64pad; else str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F); } } } return str; }, //将关键字转换为不可识别的字符 stringTonum: function(a) { var str = a.toLowerCase().split(""); var al = str.length; var getCharNumber = function (charx) { return charx.charCodeAt() - 96; }; var numout = 0; var charnum = 0; for (var i = 0; i < a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0