@using System.Text;
@using GBLab.Common.Expand;
@{
    Layout = "~/Views/School_NameCard/Shared/_Layout.cshtml";
    GBLab.Entities.T_TeacherNameCard info = ViewData["data"] as GBLab.Entities.T_TeacherNameCard;
}

<main class="micro-card-page">
    <section class="hd-info">
        <div class="hd-img">
            <div class="img-bg">
                <i class="img"><img src="@(info.F_Logo.DefaultIsNullOrEmpty(""))" alt=""></i>
            </div>
        </div>
        <div class="hd-txt">
            <span class="nm">@(info.F_Name.DefaultIsNullOrEmpty(""))</span>
            <span class="ads">
                <i class="icon-pos"></i>
                @(GBLab.Entities.Config.NameCardConfig.Config().SchoolName.DefaultIsNullOrEmpty(""))
            </span>
        </div>
    </section>
    <section class="bd-info">
        <div class="info-box">
            <a href="javascript:;" title="" class="icon-center modal-open" data-am-modal="{target: '#doc-modal-qrcode',dimmer:false,closeViaDimmer: 0}"></a>
            <a href="javascript:;" title="" class="icon-case modal-open" data-am-modal="{target: '#doc-modal-case',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">荣誉资质</span>
            </a>
            <a href="javascript:;" title="" class="icon-card modal-open" data-am-modal="{target: '#doc-modal-card',dimmer:false}">
                <i class="icon"></i>
                <span class="tit">名片</span>
            </a>
            <a href="javascript:;" title="" class="icon-interview modal-open" data-am-modal="{target: '#doc-modal-interview',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">访谈</span>
            </a>
            <a href="javascript:;" title="" class="icon-custom02 modal-open" data-am-modal="{target: '#doc-modal-honor',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">岗位</span>
            </a>
            <a href="javascript:;" title="" class="icon-phone" data-am-modal="{target: '#doc-modal-phone',closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">电话</span>
            </a>
            <a href="javascript:;" title="" class="icon-abstract modal-open" data-am-modal="{target: '#doc-modal-abstract',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">简介</span>
            </a>
        </div>
    </section>
</main>

<!-- 模态框-电话 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-phone">
    <div class="am-modal-dialog">
        <span class="phone">@(info.F_Phone.DefaultIsNullOrEmpty(""))</span>
        <div class="btn-box">
            <a href="javascript: void(0)" class="btn-cancel" data-am-modal-close>取消</a>
            <a href="javascript: void(0)" class="btn-call" data-am-modal-close>呼叫</a>
        </div>

    </div>
</div>

<!-- 模态框-二维码 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-qrcode">
    <div class="am-modal-dialog">
        <div class="qrcode-box">
            <i class="qrcode"><img src="@(info.F_NameCard.DefaultIsNullOrEmpty(""))" alt=""></i>
            <a href="javascript:;" title="" class="icon-fingerprint"></a>
            长按识别&nbsp;秒存名片
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

    </div>
</div>

<!-- 模态框-简介 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-abstract">
    <div class="am-modal-dialog">
        <div class="abstract-box">
            <div class="abstract-bd">

                <div class="item">
                    <span class="tit">设计费用：</span>
                    <div class="txt">120元/㎡</div>
                </div>
                <div class="item">
                    <span class="tit">设计经验：</span>
                    <div class="txt">6年</div>
                </div>
                <div class="item">
                    <span class="tit">擅长风格：</span>
                    <div class="txt">地中海、北欧、简约</div>
                </div>
                <div class="item">
                    <span class="tit">擅长类型：</span>
                    <div class="txt">小户型、二居室、复式</div>
                </div>
                <div class="item">
                    <span class="tit">个人简介：</span>
                    <div class="txt">
                        厦门有家室内设计创始人，设
                        计总监，设计界个性家装设计
                        推进人，中国建筑装饰协会设
                        计专业会员。
                    </div>
                </div>
                <!-- <div class="item">
                    <span class="tit">荣誉资质：</span>
                    <div class="txt">
                        <i class="img-item">
                            <img src="images/bg.jpg" alt=""></i>
                        <i class="img-item">
                            <img src="images/bg.jpg" alt=""></i>
                        <i class="img-item">
                            <img src="images/bg.jpg" alt=""></i>
                        <i class="img-item">
                            <img src="images/bg.jpg" alt=""></i>
                    </div>
                </div> -->
            </div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

    </div>
</div>

<!-- 模态框-名片 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-card">
    <div class="am-modal-dialog">
        <div class="card-box">
            <div class="txt">
                <span class="tit">学校：</span>
                <span class="info">@(GBLab.Entities.Config.NameCardConfig.Config().SchoolName.DefaultIsNullOrEmpty(""))</span>

            </div>
            <div class="txt">
                <span class="tit">电话：</span>
                <span class="info">@(info.F_Phone.DefaultIsNullOrEmpty(""))</span>
                <a href="" title="" class="contact icon-btn">联系我</a>
            </div>
            @*<div class="txt">
                    <span class="tit">QQ：</span>
                    <span class="info">@(info.f_.DefaultIsNullOrEmpty(""))</span>
                </div>*@
            <div class="txt">
                <span class="tit">邮箱：</span>
                <span class="info">@(info.F_Email.DefaultIsNullOrEmpty(""))</span>
            </div>
            <div class="txt">
                <span class="tit">微信：</span>
                <span class="info">@(info.F_WeiXin.DefaultIsNullOrEmpty(""))</span>
                <a href="" title="" class="wechat icon-btn">加微信</a>
            </div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

    </div>
</div>

<!-- 模态框-荣誉资质 -->
<div class="am-modal-actions" id="doc-modal-case">
    <div class="modal-case-box">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">

                    <ul data-am-widget="gallery" class="am am-gallery am-gallery-imgbordered" data-am-gallery="{pureview:{target: 'a'}}" data-am-gallery="{pureview:{weChatImagePreview: false}}">
                        <li>
                            <a href="http://s.amazeui.org/media/i/demos/pure-1.jpg?imageView2/0/w/640" title="春天的花开秋天的风以及冬天的落阳"><img src="images/bg.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" title="春天的花开秋天的风以及冬天的落阳ddd"></a>
                        </li>
                        <li>
                            <a style="display:none" href="images/img01.png" title=""></a>
                        </li>
                        <li>
                            <a style="display:none" href="images/img02.png" title=""></a>
                        </li>
                        <li>
                            <a style="display:none" href="images/img03.png" title=""></a>
                        </li>
                        <li>
                            <a style="display:none" href="images/img04.png" title=""></a>
                        </li>
                        <li>
                            <a style="display:none" href="images/test.png" title=""></a>
                        </li>
                        <li>
                            <a style="display:none" href="images/test.png" title=""></a>
                        </li>
                    </ul>

                    <div class="info">
                        <span class="tit">山东济宁曲阜——简美之颜</span>
                        <span class="txt">简约 | 三居室 | 108m²</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <ul data-am-widget="gallery" class="am am-gallery am-gallery-imgbordered" data-am-gallery="{pureview:{target: 'a'}}" data-am-gallery="{pureview:{weChatImagePreview: false}}">
                        <li>
                            <a href="images/img02.png" title="春天的花开秋天的风以及冬天的落阳ddd">
                                <img src="images/img03.png" alt="aaaa">
                            </a>


                        </li>
                        <li>
                            <a style="display:none" href="images/img03.png" title="ccccc"></a>

                        </li>
                        <li>
                            <a style="display:none" href="images/img04.png" title="bbbbb"></a>

                        </li>

                    </ul>

                    <div class="info">
                        <span class="tit">山东济宁曲山东济宁曲阜——简美之颜山东济宁曲阜——简美之颜阜——简美之颜</span>
                        <span class="txt">简约 | 三居室 | 108m²</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/test.jpg" alt="">
                    <div class="info">
                        <span class="tit">山东济宁曲阜——简美之颜</span>
                        <span class="txt">简约 | 三居室三居室三居室三居室三居室三居室 | 108m²</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/test.jpg" alt="">
                    <div class="info">
                        <span class="tit">山东济宁曲阜——简美之颜</span>
                        <span class="txt">简约 | 三居室 | 108m²</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/test.jpg" alt="">
                    <div class="info">
                        <span class="tit">山东济宁曲阜——简美之颜</span>
                        <span class="txt">简约 | 三居室 | 108m²</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/test.jpg" alt="">
                    <div class="info">
                        <span class="tit">山东济宁曲阜——简美之颜</span>
                        <span class="txt">简约 | 三居室 | 108m²</span>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>
    </div>
</div>

<!-- 模态框-访谈 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-interview">
    <div class="am-modal-dialog">
        <div class="interview-box">
            <div class="interview-bd">
                <span class="txt">
                    腾讯：
                    <a href="" title="">http://www.qq.com/</a>
                </span>
                <span class="txt">
                    新浪：
                    <a href="" title="">http://www.sina.com.cn/</a>
                </span>
                <span class="txt">
                    网易：
                    <a href="" title="">http://www.163.com/</a>
                </span>
                <span class="txt">
                    凤凰：
                    --
                </span>
                <span class="txt">
                    腾讯：
                    <a href="" title="">http://www.qq.com/</a>
                </span>
                <span class="txt">
                    新浪：
                    <a href="" title="">http://www.sina.com.cn/</a>
                </span>
                <span class="txt">
                    网易：
                    <a href="" title="">http://www.163.com/</a>
                </span>
                <span class="txt">
                    凤凰：
                    --
                </span>
                <span class="txt">
                    腾讯：
                    <a href="" title="">http://www.qq.com/</a>
                </span>
                <span class="txt">
                    新浪：
                    <a href="" title="">http://www.sina.com.cn/</a>
                </span>
                <span class="txt">
                    网易：
                    <a href="" title="">http://www.163.com/</a>
                </span>
                <span class="txt">
                    凤凰：
                    --
                </span>
            </div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

    </div>
</div>

<!-- 模态框 岗位 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-honor">
    <div class="am-modal-dialog">
        <div class="honor-box">
            <span class="tit">荣誉资质：</span>
            <div class="txt">
                <div class="txt-bd">
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                    <i class="img-item">
                        <img src="images/bg.jpg" alt="">
                    </i>
                </div>

            </div>
            <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

        </div>
    </div>
</div>

<script src="/App_Themes/Skin_Site/School_NameCard/js/jquery.min.js"></script>
<script src="/App_Themes/Skin_Site/School_NameCard/js/amazeui.min.js"></script>
<script src="/App_Themes/Skin_Site/School_NameCard/js/common.js"></script>
<script src="/App_Themes/Skin_Site/School_NameCard/js/amazeui.swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        paginationType: 'fraction',

        coverflow: {
            rotate: 50,
            stretch: 50,
            depth: 100,
            modifier: 1,
            slideShadows: true
        }

    });
    $(".modal-open").click(function () {
        $(".bd-info").css("display", "none");
    });
    $(".btn-close").click(function () {
        $(".bd-info").css("display", "block");
    });
</script>