Files
new_hljkx/resources/views/index/index.blade.php
2021-01-22 13:41:40 +08:00

416 lines
16 KiB
PHP

@extends('layouts.app')
@section('title', '首页')
@section('css')
<style>
.gallery-thumbs .swiper-slide {
border: 3px solid #fff;
height: calc(100% - 6px);
}
.gallery-thumbs .swiper-slide-thumb-active {
border: 3px solid #b9202f;
height: calc(100% - 6px);
}
.idxShoot {
padding-bottom: 10px;
}
.idxSurveyCont-right::after {
display: none;
}
.idxNews-ul-title {
margin-bottom: 0;
}
.idxSurveyContImg {
width: 100px;
height: 80px;
margin-right: 20px;
}
.idxSurveyCont-left {
width: calc(100% - 120px);
margin-right: 0;
line-height: 28px;
}
.idxNews-ul-title a {
width: 70%
}
.idxNews-ul li:first-child p {
height: 60px;
white-space: normal;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.idxHealthUl-text a {
margin-bottom: 20px
}
</style>
@endsection
@section('content')
<!-- 随手拍+最新资讯 -->
<div class="ce-white ui-margin-b">
<div class="contant">
<div class="idxShoot">
<div class="idxShoot-title">
<p>随手拍</p>
<span>/ BEAT</span>
</div>
<div class="idxShoot-swiper">
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
@foreach ($ssp as $element)
@foreach ($element->pictures as $picture)
<div class="swiper-slide"
style="background-image:url({{ Storage::disk('public')->url($picture ) }})"></div>
@endforeach
@endforeach
</div>
<!-- Add Arrows -->
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
@foreach ($ssp as $element)
@foreach ($element->pictures as $picture)
<div class="swiper-slide"
style="background-image:url({{ Storage::disk('public')->url($picture ) }})"></div>
@endforeach
@endforeach
</div>
</div>
</div>
</div>
<div class="idxNews">
<div class="idxShoot-title">
<p>最新资讯</p>
<span>/ NEW</span>
</div>
<ul class="idxNews-ul">
@foreach ($all_articles as $article)
<li>
<div class="idxNews-ul-title">
<a href="{{ route('article.show', $article) }}">
<p class="ce-nowrap"
style="margin-right:10px;height: 43px;">{{ $article->title }}</p></a>
<span>{{ $article->created_at }}</span>
</div>
<div class="ce-nowrap idxNews-ul-text">
{{ $article->description }}
</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<!-- 单位概况 -->
<div class="contant idxSurvey">
<div class="idxShoot-title">
<div class="idxShoot-title-name">
<p>期刊简介</p>
<span>/ INTRODUCTION OF THE JOURNAL</span>
</div>
<a href="@if ($danwei) {{ route('article.show', $danwei) }} @endif">更多 &gt;</a>
</div>
<div class="idxSurveyCont">
{{-- <img class="idxSurveyContImg" src=" @if ($danwei) {{ $danwei->cover_path }} @endif">--}}
{{-- <div class="idxSurveyCont-left">--}}
{{-- @if ($danwei) {{ $danwei->description }} @endif--}}
{{-- </div>--}}
{{-- <div class="idxSurveyCont-right">--}}
{{-- <div class="idxSurveyCont-right-img">--}}
{{-- </div>--}}
{{-- </div> --}}
@if($danwei)
<img style="width: 100%" src="{{ $danwei->cover_path }} ">
@endif
</div>
</div>
<!-- 养生保健 -->
<div class="ce-white ui-margin-t">
<div class="contant">
<div class="idxShoot-title">
<p>养生保健</p>
<span>/ HEALTH CARE</span>
</div>
<ul class="idxHealthUl">
@foreach ($ysbj as $article)
<li style="box-shadow: 0 0 20px rgba(0,0,0,.2);">
<div class="ce-img idxHealthUl-img">
<span style="background-image: url( {{ $article->cover_path }} );"></span>
</div>
<div class="idxHealthUl-text" style="text-align: center; width: 100%;">
<div class="idxHealthUl-title">{{ $article->title }}</div>
<div class="idxHealthUl-tips" style="text-align: center;margin: 0;">
{{ $article->description }}
</div>
<a href="{{ route('article.show', $article) }}">
<div class="idxHealthUl-btn">
MORE
</div>
</a>
</div>
</li>
@endforeach
</ul>
</div>
</div>
<!-- 广告位 -->
<div class="idxPoster" style="background-image: url({{ $center_advert->cover_path }});"></div>
<!-- 精彩推介 -->
<div class="ce-white" style="padding: 30px 0 50px">
<div class="contant">
<div class="idxShoot-title">
<p>精彩推介</p>
<span>/ Wonderful promotion</span>
</div>
<ul class="recomdUl">
<li>
<div class="recomdUl-title">
<div class="recomdUl-title-img">
<img src="/assets/index/images/idx/idxIcon_00.png">
<span>调研与分析</span>
</div>
<img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
</div>
@if ($dcyfx->isNotEmpty())
<div class="recomdUl-top">
<div class="ce-img recomdUl-top-img" style="height: 90px;">
<span style="background-image: url({{ $dcyfx->first()->cover_path }});"></span>
</div>
<div class="recomdUl-top-text">
<p class="ce-nowrap-multi">
<a href="{{ route('article.show', $dcyfx->first()) }}"> {{ $dcyfx->first()->title }}</a>
</p>
<span class="ce-nowrap-multi">{{ $dcyfx->first()->description }}</span>
</div>
</div>
<ul class="recomdUl-list">
@foreach ($dcyfx as $article)
@if ($loop->iteration>1)
<li class="ce-nowrap-multi">
<a href="{{ route('article.show', $article) }}">
{{ $article->title }}
</a>
</li>
@endif
@endforeach
</ul>
@endif
</li>
<li>
<div class="recomdUl-title">
<div class="recomdUl-title-img">
<img src="/assets/index/images/idx/idxIcon_01.png">
<span>应用基础研究</span>
</div>
<img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
</div>
@if ($yyjcyj->isNotEmpty())
<div class="recomdUl-top">
<div class="ce-img recomdUl-top-img" style="height: 90px;">
<span style="background-image: url({{ $yyjcyj->first()->cover_path }});"></span>
</div>
<div class="recomdUl-top-text">
<p class="ce-nowrap-multi">
<a href="{{ route('article.show', $yyjcyj->first()) }}"> {{ $yyjcyj->first()->title }}</a>
</p>
<span class="ce-nowrap-multi">{{ $yyjcyj->first()->description }}</span>
</div>
</div>
<ul class="recomdUl-list">
@foreach ($yyjcyj as $article)
@if ($loop->iteration>1)
<li class="ce-nowrap-multi">
<a href="{{ route('article.show', $article) }}">
{{ $article->title }}
</a>
</li>
@endif
@endforeach
</ul>
@endif
</li>
<li>
<div class="recomdUl-title">
<div class="recomdUl-title-img">
<img src="/assets/index/images/idx/idxIcon_02.png">
<span>技术研讨</span>
</div>
<img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
</div>
@if ($jsyt->isNotEmpty())
<div class="recomdUl-top">
<div class="ce-img recomdUl-top-img" style="height: 90px;">
<span style="background-image: url({{ $jsyt->first()->cover_path }});"></span>
</div>
<div class="recomdUl-top-text">
<p class="ce-nowrap-multi">
<a href="{{ route('article.show', $jsyt->first()) }}"> {{ $jsyt->first()->title }}</a>
</p>
<span class="ce-nowrap-multi">{{ $jsyt->first()->description }}</span>
</div>
</div>
<ul class="recomdUl-list">
@foreach ($jsyt as $article)
@if ($loop->iteration>1)
<li class="ce-nowrap-multi">
<a href="{{ route('article.show', $article) }}">
{{ $article->title }}
</a>
</li>
@endif
@endforeach
</ul>
@endif
</li>
</ul>
<ul class="recomdBtom">
<li>
<div class="recomdUl-title">
<div class="recomdUl-title-img">
<img src="/assets/index/images/idx/idxIcon_03.png">
<span>科研与应用</span>
</div>
<img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
</div>
@if ($kyyyy->isNotEmpty())
<ul class="recomdUl-list">
@foreach ($kyyyy as $article)
<li class="ce-nowrap">
<a href="{{ route('article.show', $article) }}">
{{ $article->title }}
</a>
</li>
@endforeach
</ul>
@endif
</li>
<li>
<div class="recomdUl-title">
<div class="recomdUl-title-img">
<img src="/assets/index/images/idx/idxIcon_03.png">
<span>全科医学</span>
</div>
<img class="idxIconRow" src="/assets/index/images/idx/idxIcon_row.png">
</div>
@if ($qkys->isNotEmpty())
<ul class="recomdUl-list">
@foreach ($qkys as $article)
<li class="ce-nowrap">
<a href="{{ route('article.show', $article) }}">
{{ $article->title }}
</a>
</li>
@endforeach
</ul>
@endif
</li>
</ul>
</div>
</div>
@if($qikan_advert->isNotEmpty())
<!-- 期刊 -->
<div class="idxWeekly" style="background-image: url(/assets/index/images/idx/idxWeekly_img.png);">
<div class="contant">
<div class="idxWeekly-title idxShoot-title" style="margin: 0 16px;">
<p>期刊</p>
<span>/ PERIODICAL</span>
</div>
<div class="idxWeekly-ul">
@foreach ($qikan_advert as $advert)
<div class="idxWeekly-back"
style="background-image: url({{ $advert->one_picture_path }});"></div>
@endforeach
</div>
</div>
</div>
@endif
@endsection
@push('script')
<script type="text/javascript" src="{{ asset('assets/index/js/swiper-bundle.min.js') }}"></script>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 3,
loop: true,
freeMode: true,
loopedSlides: 3, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
loopedSlides: 3, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});
// var galleryTop = new Swiper('.gallery-top', {
// spaceBetween: 10,
// loop: true
// });
// var galleryThumbs = new Swiper('.gallery-thumbs', {
// spaceBetween: 10,
// slidesPerView: 3,
// touchRatio: 0.3,
// loop: true,
// slideToClickedSlide: true
// });
// galleryTop.params.control = galleryThumbs;
// galleryThumbs.params.control = galleryTop;
// 期刊
var aswiper = new Swiper('.weekly-container', {
pagination: '.swiper-pagination',
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 30,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
</script>
@endpush