quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 2.65 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as o,a as r,b as a,H as e,d as c,N as i,B as d}from"../index2.js";function s(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var a,e=o(t);if(n){var c=o(this).constructor;a=Reflect.construct(e,arguments,c)}else a=e.apply(this,arguments);return r(this,a)}}var l=function(o){a(c,e);var r=s(c);function c(){return t(this,c),r.apply(this,arguments)}return n(c,[{key:"componentDidMount",value:function(){console.log(this.shadowRoot,99)}},{key:"attributeChangedCallback",value:function(t,n,o){console.log(t,n,o,111)}},{key:"render",value:function(){return e.h("div",{class:"card-container"},e.h("div",{class:"title"},this.title),e.h("div",{class:"card-body"},e.h("slot",{name:"content"},e.h("div",{class:"content"},this.content)),e.h("div",{class:"tips"},this.tips)),e.h("slot",{name:"desc"},e.h("div",{class:"desc"},this.desc)))}}]),c}();c([i()],l.prototype,"title",void 0),c([i()],l.prototype,"content",void 0),c([i()],l.prototype,"tips",void 0),c([i()],l.prototype,"desc",void 0);var v=l=c([d({tag:"quark-card",style:":host {\n display: flex;\n height: var(--card-height, 36.8vw);\n background-color: #fff;\n border-radius: var(--card-border-radius, 1.06667vw);\n overflow: hidden;\n padding-left: var(--card-hspacing, 5.33333vw);\n padding-right: var(--card-hspacing, 5.33333vw);\n padding-top: var(--card-vspacing, 5.33333vw);\n padding-bottom: var(--card-vspacing, 5.33333vw);\n box-sizing: border-box;\n}\n.card-container {\n width: 100%;\n}\n.card-container .title {\n font-size: var(--card-title-font-size, 3.73333vw);\n color: var(--card-title-color, #999);\n margin-bottom: var(--card-title-margin-bottom, 2.66667vw);\n}\n.card-body {\n display: grid;\n grid-template-columns: 1fr 21.33333vw;\n border-bottom: 1px solid #eee;\n padding-bottom: var(--card-body-padding-bottom, 5.33333vw);\n}\n.card-container .content {\n color: var(--card-content-color, #666);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n font-size: var(--card-content-font-size, 3.73333vw);\n}\n.card-container .tips {\n color: var(--card-tips-color, #333);\n font-size: var(--card-tips-font-size, 4vw);\n text-align: right;\n}\n.card-container .desc {\n color: var(--card-desc-color, #999);\n font-size: var(--card-desc-font-size, 3.73333vw);\n padding-top: var(--card-desc-padding-top, 3.73333vw);\n}\n"})],l);export{v as default};