已选配置 - 云服务器配置详情

<div class='wrap-rule-name'><span>已选配置：</span><a class='sty-zkss'>展开↓</a></div>
<div class='wrap-rule-body clearfix'>
    <div class='row' style='margin-top:12px;font-size:12px;'>
        <div class='col-sm-3'>
            {_('可用区')}：<span v-text='area.name'></span>/<span v-text='server_line.name'></span>/<span v-text='cluster.name'></span><br>
            {_('规格')}：<span v-text='server.title'></span><br>
            <template v-if='form_data.system_name'>
                {_('操作系统')}：<span v-text='form_data.system_name'></span><br>
            </template>
            <template v-if='server.kvm_type!='pterodactyl''>
                {_('登录凭证')}：<span v-text='ssh_mod_list[form_data.ssh_mod]'></span><br>
            </template>
        </div>
        <div class='col-sm-3'>
            {_('CPU')}：<span v-text='form_data.cpus'></span>{_('核')}<br>
            {_('内存')}：<span v-text='mem_format(form_data.mem,2,'MB')'></span><br>
            {_('存储')}：<span v-text='mem_format(form_data.disk,2,'GB')'></span>
            <span v-if='form_data.disks.length>0' v-for='(m,i) in form_data.disks'>
                <span class='text-muted'> + </span>
                <span v-text='mem_format(m,2,'GB')'></span>
            </span>
        </div>
        <div class='col-sm-3 hide-col' v-if='server.kvm_type!='pterodactyl''>
            {_('IP数量')}：<span v-text='form_data.ip_number'></span>个<br>
            <span v-show='form_data.net_mod==1'>{_('固定带宽')}：<span v-text='form_data.net'></span>Mbps</span>
            <span v-show='form_data.net_mod==3'>{_('流量包')}：<span v-text='form_data.flows'></span>GB</span>
            <span v-show='form_data.net_mod==2'>{_('按实时流量计费')}</span><br>
            <span v-show='form_data.net_mod==2||form_data.net_mod==3'>{_('带宽峰值')}：<span v-text='form_data.flow'></span>Mbps<br></span>
            <span v-show='form_data.def>0'>{_('防御峰值')}：<span v-text='form_data.def'></span>GB<br></span>
        </div>
        <div class='col-sm-3'>
            {_('自动续费')}：<span v-text='renew_list[form_data.auto_renew]'></span><br>
            {_('购买量')}：<span v-text='form_data.buy_num'></span>{_e()}{_('台')} * <span v-text='price_cycle[form_data.payment_mod].name'></span><br>
            {_('主机别名')}：<span v-text='form_data.server_name'></span><br>
        </div>
    </div>
</div>
<style>
    .hide-col {
        display: none;
    }
<pre><code>.wrap-rule-name {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrap-rule-name span {
    font-weight: bold;
}

.sty-zkss:hover {
    cursor: pointer;
}
</code></pre>
</style>
<script>
    const stk = document.querySelector('.sty-zkss');
    const cols = document.querySelectorAll('.col-sm-3');

    stk.addEventListener('click', () => {
        cols.forEach(col => col.classList.toggle('hide-col'));
        stk.textContent = stk.textContent === '展开↓' ? '收起↓' : '展开↑';
    });
</script>