123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- <style scoped>
- h3 {
- margin-bottom: 15px;
- }
- .block {
- margin-bottom: 55px;
- }
- p {
- margin: 0 0 15px;
- }
- .nav-demos {
- p {
- margin-bottom: 50px;
- }
- h5 {
- margin: 0;
- }
- img {
- padding: 15px;
- background-color: #F9FAFC;
- width: 100%;
- margin-bottom: 15px;
- cursor: pointer;
- }
- }
- .dialog-img {
- position: fixed;
- overflow: auto;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- -webkit-overflow-scrolling: touch;
- outline: 0;
-
- .imgWrap {
- margin: 0 auto;
- position: relative;
- top: 100px;
- padding-bottom: 50px;
- }
- img {
- display: block;
- width: 100%;
- }
- }
- .mask {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- background-color: #373737;
- background-color: rgba(55, 55, 55, 0.6);
- height: 100%;
- z-index: 1000;
- }
- .zoom-enter-active,
- .zoom-leave-active {
- transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
- }
- .zoom-enter,
- .zoom-leave-active {
- transform: scale(0.3);
- opacity: 0;
- }
- .fade-enter-active,
- .fade-leave-active {
- transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
- }
- .fade-enter,
- .fade-leave-active {
- opacity: 0;
- }
- </style>
- <template>
- <div>
- <h2><%= 1 ></h2>
- <div class="block">
- <p><%= 2 ></p>
- </div>
- <div class="block">
- <h3><%= 3 ></h3>
- <p><%= 4 ></p>
- </div>
- <div class="block">
- <h3><%= 5 ></h3>
- <el-row :gutter="20">
- <el-col :span="9">
- <p><%= 6 ></p>
- </el-col>
- <el-col :span="15" class="nav-demos">
- <img src="~examples/assets/images/navbar_1.png" alt="<%= 7 >" @click="enlarge(846, $event)">
- <h5><%= 7 ></h5>
- <p><%= 8 ></p>
- <img src="~examples/assets/images/navbar_2.png" alt="<%= 9 >" @click="enlarge(846, $event)">
- <h5><%= 9 ></h5>
- <p><%= 10 ></p>
- <img src="~examples/assets/images/navbar_3.png" alt="<%= 11 >" @click="enlarge(846, $event)">
- <h5><%= 11 ></h5>
- <p><%= 12 ></p>
- </el-col>
- </el-row>
- </div>
- <div class="block">
- <h3><%= 13 ></h3>
- <el-row>
- <el-col :span="10">
- <p><%= 14 ></p>
- </el-col>
- <el-col :span="14" class="nav-demos">
- <img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
- <p><%= 15 ></p>
- </el-col>
- </el-row>
- </div>
- <transition name="fade">
- <div class="mask" v-show="showDialog" @click="showDialog = false"></div>
- </transition>
- <transition name="zoom">
- <div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
- <div class="imgWrap" :style="imgStyle">
- <img :src="imgUrl" alt="">
- </div>
- </div>
- </transition>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- imgUrl: '',
- imgBound: {},
- showDialog: false,
- imgStyle: {},
- imgWrapStyle: {}
- };
- },
- watch: {
- showDialog(val) {
- document.body.style.overflow = val ? 'hidden' : '';
- }
- },
- methods: {
- enlarge(imgWidth, ev) {
- var imgNode = ev.target;
- // var bound = imgNode.getBoundingClientRect();
- var offset = {};
- var doc = document;
- offset.left = (doc.body.scrollWidth - imgWidth) / 2;
- offset.top = 100;
- this.imgUrl = imgNode.src;
- this.imgBound = imgNode.getBoundingClientRect();
- this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
- // this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
- this.imgStyle.width = imgWidth + 'px';
- this.showDialog = true;
- }
- }
- };
- </script>
|