@shixinde/vuepress-theme-init
Version:
393 lines • 118 kB
JavaScript
import{_ as n,c as s,o as a,a as t}from"./app-Dx9bNbfq.js";const p={},e=t(`<h1 id="组件封装" tabindex="-1"><a class="header-anchor" href="#组件封装"><span>组件封装</span></a></h1><h2 id="_1-单选按钮组件封装" tabindex="-1"><a class="header-anchor" href="#_1-单选按钮组件封装"><span>1. 单选按钮组件封装</span></a></h2><blockquote><p>需要传值 <code>title</code> 列表的标题、<code>defaulttitle</code>默认标题、<code>listdata</code>渲染列表的数据</p></blockquote><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yxd-order-list-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>items <span class="token punctuation">"</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{margintop:ismargintop}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> {{title}} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smalltitle<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smalltitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{smalltitle}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item flex space-between<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectItem(item)<span class="token punctuation">"</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(item,index) in listdata<span class="token punctuation">"</span></span></span>
<span class="line"> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{item || item.data}} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemRemarks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{itemRemarks}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-img<span class="token punctuation">"</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SelectItem!='' ? SelectItem===item : defaulttitle ===item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/active.png<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img100<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-img-no<span class="token punctuation">"</span></span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 大标题</span></span>
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">"默认标题"</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> </span>
<span class="line"> <span class="token comment">// 小标题</span></span>
<span class="line"> <span class="token literal-property property">smalltitle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 是否默认进行上边距</span></span>
<span class="line"> <span class="token literal-property property">ismargintop</span><span class="token operator">:</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span>Boolean<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span><span class="token boolean">true</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 默认选中的标题</span></span>
<span class="line"> <span class="token literal-property property">defaulttitle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">//列表数据</span></span>
<span class="line"> <span class="token literal-property property">listdata</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Array<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token string">"天气原因不方便出行2"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"换票不方便"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"入园证件未带/带错"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"需要提前购买不能马上入园"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"有价格更优惠的票"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"计划有变/拍错/不想去了"</span></span>
<span class="line"> <span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> </span>
<span class="line"> <span class="token literal-property property">itemRemarks</span><span class="token operator">:</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span>String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span><span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">SelectItem</span><span class="token operator">:</span><span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">selectItem</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>SelectItem <span class="token operator">=</span> value</span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
<span class="line"> <span class="token selector">.yxd-order-list-container</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token selector">.margintop</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">margin-top</span><span class="token punctuation">:</span> 16upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token selector">;</span>
<span class="line"> .items</span> <span class="token punctuation">{</span></span>
<span class="line"> </span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">padding</span><span class="token punctuation">:</span> 20upx 40upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.title</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 34upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token selector">.smalltitle</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 28upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">padding-left</span><span class="token punctuation">:</span> 13upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> </span>
<span class="line"></span>
<span class="line"> <span class="token selector">.item</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 75upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 75upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #f3f4f6<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.text</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 28upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token selector">.itemRemarks</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 26upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> #fd871f<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.item-img</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> #fb8519<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">image</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.item-img-no</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #c6c6c6<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-多选按钮组件封装" tabindex="-1"><a class="header-anchor" href="#_2-多选按钮组件封装"><span>2.多选按钮组件封装</span></a></h2><blockquote><p>需要传值 <code>title</code> 列表的标题、<code>smalltitle</code>小标题、<code>ismargintop</code>组件是否显示默认上边距[默认为<code>true</code>]、<code>defaulttitle</code>默认选中标题、<code>listdata</code>渲染列表的数据、<code>itemRemarks</code>单条的列表的子标题</p></blockquote><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yxd-order-list-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>items <span class="token punctuation">"</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{margintop:ismargintop}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> {{title}} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smalltitle<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smalltitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{smalltitle}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token comment"><!-- v-if="SelectItem!='' ? SelectItem===item : defaulttitle ===item" --></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item flex space-between<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectItem(item)<span class="token punctuation">"</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(item,index) in listdata<span class="token punctuation">"</span></span></span>
<span class="line"> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{item || item.data}} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemRemarks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{itemRemarks}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-img<span class="token punctuation">"</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isselected.indexOf(item)>-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/active.png<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img100<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item-img-no<span class="token punctuation">"</span></span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 大标题</span></span>
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">"默认标题"</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 小标题</span></span>
<span class="line"> <span class="token literal-property property">smalltitle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 是否默认进行上边距</span></span>
<span class="line"> <span class="token literal-property property">ismargintop</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Boolean<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 默认选中的标题</span></span>
<span class="line"> <span class="token literal-property property">defaulttitle</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">//列表数据</span></span>
<span class="line"> <span class="token literal-property property">listdata</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Array<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token string">"天气原因不方便出行2"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"换票不方便"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"入园证件未带/带错"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"需要提前购买不能马上入园"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"有价格更优惠的票"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">"计划有变/拍错/不想去了"</span></span>
<span class="line"> <span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line"> <span class="token literal-property property">itemRemarks</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">""</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">SelectItem</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">isselected</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">selectItem</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>SelectItem <span class="token operator">=</span> value</span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isselected<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">//移除数组中的数据，index为从第几个开始数，1为移除几个。</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>isselected<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>isselected<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isselected<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isselected<span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
<span class="line"> <span class="token selector">.yxd-order-list-container</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token selector">.margintop</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">margin-top</span><span class="token punctuation">:</span> 16upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">;</span>
<span class="line"></span>
<span class="line"> .items</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">padding</span><span class="token punctuation">:</span> 20upx 40upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.title</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 34upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.smalltitle</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 28upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 85upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">padding-left</span><span class="token punctuation">:</span> 13upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.item</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 75upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 75upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #f3f4f6<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.text</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 28upx<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.itemRemarks</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">font-size</span><span class="token punctuation">:</span> 26upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> #fd871f<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.item-img</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> #fb8519<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">image</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token selector">.item-img-no</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 30upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50upx<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #c6c6c6<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-时间组件封装" tabindex="-1"><a class="header-anchor" href="#_3-时间组件封装"><span>3.时间组件封装</span></a></h2><blockquote><p>传递一个<code>时间戳</code>，可以然后对这个时间戳进行相应的变化</p></blockquote><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> {{content}}</span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"azy-time"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">time_inv</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">time_text</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">content</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span><span class="token comment">//展示的文字</span></span>
<span class="line"> <span class="token literal-property property">minute</span><span class="token operator">:</span><span class="token string">""</span> <span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">second</span><span class="token operator">:</span><span class="token string">""</span></span>
<span class="line"> </span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">props</span><span class="token operator">:</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">timemap</span><span class="token operator">:</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span>Number<span class="token punctuation">,</span></span>
<span class="line"> <span class="token keyword">default</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>time_text <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$props<span class="token punctuation">.</span>timemap<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span></span>
<span class="line"> that<span class="token punctuation">.</span>time_inv <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> that<span class="token punctuation">.</span>time_text<span class="token operator">--</span><span class="token punctuation">;</span></span>
<span class="line"> that<span class="token punctuation">.</span>minute<span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">parseInt</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text<span class="token operator">/</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><10</span><span class="token template-punctuation string">\`</span></span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">+</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">parseInt</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text<span class="token operator">/</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">parseInt</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text<span class="token operator">/</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span></span>
<span class="line"> that<span class="token punctuation">.</span>second<span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">parseInt</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text<span class="token operator">%</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token operator"><</span><span class="token number">10</span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">+</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">parseInt</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text<span class="token operator">%</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">parseInt</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_text<span class="token operator">%</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span></span>
<span class="line"> that<span class="token punctuation">.</span>content <span class="token operator">=</span> that<span class="token punctuation">.</span>minute<span class="token operator">+</span><span class="token string">':'</span><span class="token operator">+</span>that<span class="token punctuation">.</span>second</span>
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">clearInterval</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>time_inv<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> </span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
<span class="line"> </span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-获取验证码" tabindex="-1"><a class="header-anchor" href="#_4-获取验证码"><span>4.获取验证码</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getcode<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getCode<span class="token punctuation">"</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seconds<0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 获取验证码 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getcode<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getCode<span class="token punctuation">"</span></span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seconds==0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 重新获取 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getcode<span class="token punctuation">"</span></span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span> {{seconds}}s <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">seconds</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">inv</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token function">getCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">this</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>seconds <span class="token operator"><=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 模拟向后端请求验证码</span></span>
<span class="line"> uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'正在获取验证码'</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> uni<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 这里此提示会被this.start()方法中的提示覆盖</span></span>
<span class="line"> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'验证码已发送'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 通知验证码组件内部开始倒计时</span></span>
<span class="line"> <span class="token comment">// this.$refs.uCode.start();</span></span>
<span class="line"> that<span class="token punctuation">.</span>seconds <span class="token operator">=</span> <span class="token number">60</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>that<span class="token punctuation">.</span>inv<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> that<span class="token punctuation">.</span>inv <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>seconds <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">clearInterval</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>inv<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> that<span class="token punctuation">.</span>inv <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> that<span class="token punctuation">.</span>seconds<span class="token operator">--</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'倒计时结束后再发送'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,14),l=[e];function c(o,i){return a(),s("div",null,l)}const k=n(p,[["render",c],["__file","组件封装.html.vue"]]),r=JSON.parse(`{"path":"/%E9%A3%9E%E7%A0%81%E7%AF%87/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85.html","title":"组件封装","lang":"zh-CN","frontmatter":{"title":"组件封装","date":"2022-08-04T00:00:00.000Z","tags":["组件","封装"],"categories":["飞码篇"]},"headers":[{"level":2,"title":"1. 单选按钮组件封装","slug":"_1-单选按钮组件封装","link":"#_1-单选按钮组件封装","children":[]},{"level":2,"title":"2.多选按钮组件封装","slug":"_2-多选按钮组件封装","link":"#_2-多选按钮组件封装","children":[]},{"level":2,"title":"3.时间组件封装","slug":"_3-时间组件封装","link":"#_3-时间组件封装","children":[]},{"level":2,"title":"4.获取验证码","slug":"_4-获取验证码","link":"#_4-获取验证码","children":[]}],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"飞码篇/组件封装.md","excerpt":"\\n<h2>1. 单选按钮组件封装</h2>\\n<blockquote>\\n<p>需要传值 <code>title</code> 列表的标题、<code>defaulttitle</code>默认标题、<code>listdata</code>渲染列表的数据</p>\\n</blockquote>\\n<div class=\\"language-vue\\" data-highlighter=\\"prismjs\\" data-ext=\\"vue\\" data-title=\\"vue\\"><pre class=\\"language-vue\\"><code><span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>template</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>yxd-order-list-container<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>items <span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">:class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>{margintop:ismargintop}<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>title<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t{{title}} <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>text</span> <span class=\\"token attr-name\\">v-if</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>smalltitle<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>smalltitle<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span>{{smalltitle}}<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>text</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>item flex space-between<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">@click</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>selectItem(item)<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">v-for</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>(item,index) in listdata<span class=\\"token punctuation\\">\\"</span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token attr-name\\">:key</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>index<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>text<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span>{{item || item.data}} <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>text</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>itemRemarks<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span>{{itemRemarks}}<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>text</span><span class=\\"token punctuation\\">></span></span> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>item-img<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">v-if</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>SelectItem!='' ? SelectItem===item : defaulttitle ===item<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>image</span> <span class=\\"token attr-name\\">src</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>/static/active.png<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>img100<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">mode</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span><span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>image</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>view</span> <span class=\\"token attr-name\\">class</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>item-img-no<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">v-else</span><span class=\\"token punctuation\\">></span></span> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>view</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>template</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>script</span><span class=\\"token punctuation\\">></span></span><span class=\\"token script\\"><span class=\\"token language-javascript\\"></span>\\n<span class=\\"line\\">\\t<span class=\\"token keyword\\">export</span> <span class=\\"token keyword\\">default</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token literal-property property\\">props</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token comment\\">// 大标题</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token literal-property property\\">title</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span> String<span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">default</span><span class=\\"token operator\\">:</span> <span class=\\"token string\\">\\"默认标题\\"</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span>\\t</span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token comment\\">// 小标题</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token literal-property property\\">smalltitle</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span> String<span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">default</span><span class=\\"token operator\\">:</span> <span class=\\"token string\\">\\"\\"</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token comment\\">// 是否默认进行上边距</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token literal-property property\\">ismargintop</span><span class=\\"token operator\\">:</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span>Boolean<span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">default</span><span class=\\"token operator\\">:</span><span class=\\"token boolean\\">true</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token comment\\">// 默认选中的标题</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token literal-property property\\">defaulttitle</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span> String<span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">default</span><span class=\\"token operator\\">:</span> <span class=\\"token string\\">\\"\\"</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token comment\\">//列表数据</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token literal-property property\\">listdata</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span> Array<span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">default</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">[</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token string\\">\\"天气原因不方便出行2\\"</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token string\\">\\"换票不方便\\"</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token string\\">\\"入园证件未带/带错\\"</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token string\\">\\"需要提前购买不能马上入园\\"</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token string\\">\\"有价格更优惠的票\\"</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token string\\">\\"计划有变/拍错/不想去了\\"</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token punctuation\\">]</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t</span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token literal-property property\\">itemRemarks</span><span class=\\"token operator\\">:</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span>String<span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">default</span><span class=\\"token operator\\">:</span><span class=\\"token string\\">\\"\\"</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token function\\">data</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token keyword\\">return</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token literal-property property\\">SelectItem</span><span class=\\"token operator\\">:</span><span class=\\"token string\\">\\"\\"</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">,</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token literal-property property\\">methods</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token function\\">selectItem</span><span class=\\"token punctuation\\">(</span><span class=\\"token parameter\\">value</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>SelectItem <span class=\\"token operator\\">=</span> value</span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">$emit</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'change'</span><span class=\\"token punctuation\\">,</span> value<span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>script</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>style</span> <span class=\\"token attr-name\\">lang</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>scss<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">scoped</span><span class=\\"token punctuation\\">></span></span><span class=\\"token style\\"><span class=\\"token language-css\\"></span>\\n<span class=\\"line\\">\\t<span class=\\"token selector\\">.yxd-order-list-container</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token selector\\">.margintop</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token property\\">margin-top</span><span class=\\"token punctuation\\">:</span> 16upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token punctuation\\">}</span><span class=\\"token selector\\">;</span>\\n<span class=\\"line\\">\\t\\t.items</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t</span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token property\\">width</span><span class=\\"token punctuation\\">:</span> 100%<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token property\\">padding</span><span class=\\"token punctuation\\">:</span> 20upx 40upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token property\\">background-color</span><span class=\\"token punctuation\\">:</span> #fff<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token selector\\">.title</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">font-size</span><span class=\\"token punctuation\\">:</span> 34upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 85upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">line-height</span><span class=\\"token punctuation\\">:</span> 85upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token selector\\">.smalltitle</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">font-size</span><span class=\\"token punctuation\\">:</span> 28upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 85upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">line-height</span><span class=\\"token punctuation\\">:</span> 85upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">padding-left</span><span class=\\"token punctuation\\">:</span> 13upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t\\t</span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token selector\\">.item</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 75upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">line-height</span><span class=\\"token punctuation\\">:</span> 75upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">border-top</span><span class=\\"token punctuation\\">:</span> 1px solid #f3f4f6<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">display</span><span class=\\"token punctuation\\">:</span> flex<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token property\\">align-items</span><span class=\\"token punctuation\\">:</span> center<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token selector\\">.text</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">font-size</span><span class=\\"token punctuation\\">:</span> 28upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token selector\\">.itemRemarks</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t\\t<span class=\\"token property\\">font-size</span><span class=\\"token punctuation\\">:</span> 26upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t\\t<span class=\\"token property\\">color</span><span class=\\"token punctuation\\">:</span> #fd871f<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token selector\\">.item-img</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">width</span><span class=\\"token punctuation\\">:</span> 30upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 30upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">background-color</span><span class=\\"token punctuation\\">:</span> #fb8519<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">border-radius</span><span class=\\"token punctuation\\">:</span> 50upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">display</span><span class=\\"token punctuation\\">:</span> flex<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">justify-content</span><span class=\\"token punctuation\\">:</span> center<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">align-items</span><span class=\\"token punctuation\\">:</span> center<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token selector\\">image</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t\\t<span class=\\"token property\\">width</span><span class=\\"token punctuation\\">:</span> 80%<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t\\t<span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 80%<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token selector\\">.item-img-no</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">width</span><span class=\\"token punctuation\\">:</span> 30upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 30upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">border-radius</span><span class=\\"token punctuation\\">:</span> 50upx<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">\\t\\t\\t\\t\\t<span class=\\"token property\\">border</span><span class=\\"token punctuation\\">:</span> 1px solid #c6c6c6<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">\\t\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">\\t<span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>style</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{k as comp,r as data};