92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

前端大屏常用的幾種適配方案

2023-1-28    前端達人

方 案 實現方式 優點 缺點
vm vh 1.按照設計稿的尺寸，將px按比例計算轉為vw和vh 1.可以動態計算圖表的寬高，字體等，靈活性較高 2.當屏幕比例跟 ui 稿不一致時，不會出現兩邊留白情況 1.每個圖表都需要單獨做字體、間距、位移的適配，比較麻煩
scale 1.通過 scale 屬性，根據屏幕大小，對圖表進行整體的等比縮放 1.代碼量少，適配簡單2.一次處理后不需要在各個圖表中再去單獨適配 3.文字，圖片等大小均能自動適配 1.因為是根據 ui 稿等比縮放，當大屏跟 ui 稿的比例不一樣時，會出現周邊留白情況2.當縮放比例過大時候，字體會有一點點模糊，就一點點3.當縮放比例過大時候，事件熱區會偏移。
插件v-scale-screen 是使用 css 屬性 transform 實現縮放效果的一個大屏自適應組件，通過 scale 進行等比例計算，達到等比例縮放的效果 可以通過api調整原稿的寬高

方案一：vw vh

1.當屏幕正好為16：9的時候
2.當屏幕的尺寸比例大于 16:9 （左右拉長）
在這里插入圖片描述
3.當屏幕的尺寸比例小于 16:9 時（左右變窄或者上下拉高）

在這里插入圖片描述
實現方法：
css 方案 - sass
utils.scss 

// 使用 scss 的 math 函數，https://sass-lang.com/documentation/breaking-changes/slash-div @use "sass:math"; // 默認設計稿的寬度 $designWidth: 1920; // 默認設計稿的高度 $designHeight: 1080; // px 轉為 vw 的函數 @function vw($px) { @return math.div($px, $designWidth) * 100vw; } // px 轉為 vh 的函數 @function vh($px) { @return math.div($px, $designHeight) * 100vh; } 復制代碼 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    •

路徑配置只需在vue.config.js里配置一下utils.scss的路徑，就可以全局使用了
vue.config.js 

module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/css/utils.scss";` } } }, } 在 .vue 中使用 <template> <div class="box"> </div> </template> <script> export default{ name: "Box", } </script> <style lang="scss" scoped="scoped"> /* 
 直接使用 vw 和 vh 函數，將像素值傳進去，得到的就是具體的 vw vh 單位   
 */ .box{ width: vw(300); height: vh(100); font-size: vh(16); background-color: black; margin-left: vw(10); margin-top: vh(10); border: vh(2) solid red; } </style> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    •

css 方案 - less 

utils.less
@charset "utf-8"; // 默認設計稿的寬度 @designWidth: 1920; // 默認設計稿的高度 @designHeight: 1080; .px2vw(@name, @px) { @{name}: (@px / @designWidth) * 100vw; } .px2vh(@name, @px) { @{name}: (@px / @designHeight) * 100vh; } .px2font(@px) { font-size: (@px / @designWidth) * 100vw; } 路徑配置在vue.config.js里配置一下utils.less <style lang="less" scoped="scoped"> /* 
 直接使用 vw 和 vh 函數，將像素值傳進去，得到的就是具體的 vw vh單位   
 */ .box{ .px2vw(width, 300); .px2vh(height, 100); .px2font(16); .px2vw(margin-left, 300); .px2vh(margin-top, 100); background-color: black; } </style> 定義 js 樣式處理函數 // 定義設計稿的寬高 const designWidth = 1920; const designHeight = 1080; // px轉vw export const px2vw = (_px) => { return (_px * 100.0) / designWidth + 'vw'; }; export const px2vh = (_px) => { return (_px * 100.0) / designHeight + 'vh'; }; export const px2font = (_px) => { return (_px * 100.0) / designWidth + 'vw'; }; 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    •

屏幕變化后，圖表自動調整
這種使用方式有個弊端，就是屏幕尺寸發生變化后，需要手動刷新一下才能完成自適應調整

為了解決這個問題，你需要在各個圖表中監聽頁面尺寸變化，重新調整圖表，在 vue 項目中，也可以借助element-resize-detector，最好封裝個 resize 的指令，在各圖表中就只要使用該指令就可以了，畢竟作為程序員，能偷懶就偷懶
解決方案一

  1. 安裝 element-resize-detector 
npm install element-resize-detector --save 

    

    
  • 
        1
    
    •
  1. 封裝成自定義指令使用 
// directive.js import * as ECharts from "echarts"; import elementResizeDetectorMaker from "element-resize-detector"; import Vue from "vue"; const HANDLER = "_vue_resize_handler"; function bind(el, binding) { el[HANDLER] = binding.value ? binding.value : () => { let chart = ECharts.getInstanceByDom(el); if (!chart) { return; } chart.resize(); }; // 監聽綁定的div大小變化，更新 echarts 大小 elementResizeDetectorMaker().listenTo(el, el[HANDLER]); } function unbind(el) { // window.removeEventListener("resize", el[HANDLER]); elementResizeDetectorMaker().removeListener(el, el[HANDLER]); delete el[HANDLER]; } // 自定義指令：v-chart-resize 示例：v-chart-resize="fn" Vue.directive("chart-resize", { bind, unbind }); 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    •
  1. main.js 中引入 
 import '@/directive/directive'; 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •
  1. html 代碼中使用 
<template> <div class="linechart"> <div ref="chart" v-chart-resize class="chart"></div> </div> </template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

這里要注意的是，圖表中如果需要 tab 切換動態更新圖表數據，在更新數據時一定不要用 echarts 的 dispose 方法先將圖表移除，再重新繪制，因為 resize 指令中掛載到的圖表實例還是舊的，就監聽不到新的 chart 元素的 resize 了，更新數據只需要用 chart 的 setOption 方法重新設置配置項即可。
解決方案二
1.在echarts中可以echarts.init(chatDom).resize()來解決寬高的自適應問題 

 let chatDom = document.getElementById('main'); let myChart = this.$echarts.init(chatDom); //根據父盒子的尺寸調整echarts的大小 setTimeout(() => { window.addEventListener('resize', () => { this.$echarts.init(chatDom).resize(); }); }, 20); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

2.在DataV中可以添加key來解決 

<dv-water-level-pond :config="config2" :key="key" ref="pie2" /> data(){ return { key: 1 } }, mounted() { this.pieOutlineFunc(); }, methods: { pieOutlineFunc() { var _this = this; window.addEventListener('resize', function (e) { _this.$nextTick(() => { console.log(_this.$refs.pie2); _this.key++; }); }); } } 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

方案二：csale

通過 css 的 scale 屬性，根據屏幕大小，用js監測屏幕的大小變化對圖表進行整體的等比縮放，從而達到自適應效果
當屏幕的尺寸比例剛好是 16:9 時，頁面能剛好全屏展示，內容占滿顯示器
在這里插入圖片描述
當屏幕尺寸比例大于 16:9 時，上下左右留白，左右占滿并居中，顯示比例保持 16:9

在這里插入圖片描述
當屏幕尺寸比例大于 16:9 時，頁面左右留白，上下占滿并居中，顯示比例保持 16:9
在這里插入圖片描述
上代碼
html 

<template> <div class="screen-root"> <div class="screen" id="screen"> <div class="div1"> <h1>11111111111</h1> </div> <div class="div2"> <h1>2222222222</h1> </div> <div class="div3"> <h1>3333333333</h1> </div> </div> </div> </template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •

js 

<script> export default { mounted() { // 初始化自適應  ----在剛顯示的時候就開始適配一次 this.handleScreenAuto(); // 綁定自適應函數   ---防止瀏覽器欄變化后不再適配 window.onresize = () => this.handleScreenAuto(); }, deleted() { window.onresize = null; }, methods: { // 數據大屏自適應函數 handleScreenAuto() { const designDraftWidth = 1920; //設計稿的寬度 const designDraftHeight = 1080; //設計稿的高度 // 根據屏幕的變化適配的比例 const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ? document.documentElement.clientWidth / designDraftWidth : document.documentElement.clientHeight / designDraftHeight; // 縮放比例 document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%,-50%)`; return 1; } } }; </script> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    •

css 

<style lang="scss" scoped> /*
  除了設計稿的寬高是根據您自己的設計稿決定以外，其他復制粘貼就完事
*/ h1 { color: red; font-size: 50px; } .screen-root { height: 100vh; width: 100vw; .screen { display: inline-block; width: 1920px; //設計稿的寬度 height: 1080px; //設計稿的高度 transform-origin: 0 0; position: absolute; left: 50%; top: 50%; border: 2px solid rgb(31, 210, 145); box-sizing: border-box; display: flex; .div1 { background-color: #fff; height: 100%; text-align: center; flex: 0 1 30%; } .div2 { background-color: rgb(133, 14, 14); height: 100%; text-align: center; flex: 0 1 40%; } .div3 { background-color: rgb(61, 6, 188); height: 100%; text-align: center; flex: 0 1 30%; } } } </style> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    •

方案三：插件v-scale-screen

它其實也是通過 scale 進行等比例計算放大和縮小的，和方案二的原理是一樣的，還可以通過api調整樣式，源碼地址和對應的API
在這里插入圖片描述
使用方法：
1.vue2請使用v-scale-screen@1.0.0版本，vue3請使用v-scale-screen@2.0.0版本 

npm install v-scale-screen@1.0.0 -save
# or
yarn add v-scale-screen 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

2.使用-vue2中使用插件導入，vue3以組件導入 

vue2 // main.js import VScaleScreen from 'v-scale-screen' Vue.use(VScaleScreen) 組件內使用 //html <v-scale-screen width="1920" height="1080" :boxStyle="boxStyle"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div> </v-scale-screen> //js data() { return { boxStyle: { backgroundColor: 'green' }, } 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 




vue3 <v-scale-screen width="1920" height="1080"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div> </v-scale-screen> <script> import VScaleScreen from 'v-scale-screen' export default { components:{ VScaleScreen } } </script> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    •
  1. vue2演示地址



    著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。


    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

    藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

日歷

鏈接

個人資料

藍藍設計的小編 http://www.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
爽爽爽爽爽爽爽成人免费观看| 91精品久久久久久久久不口人| 国产精品人人做人人爽| 亚洲自拍偷拍色片视频| 国产精品18久久久久久麻辣| 国产香蕉97碰碰久久人人| 国产精品入口免费视| 国产精品电影久久久久电影网| 亚洲一区二区三区乱码aⅴ蜜桃女| 久久久久在线观看| 国产日韩精品在线观看| 欧美激情喷水视频| 欧美日韩一区免费| 亚洲一区二区三区xxx视频| 久久91亚洲精品中文字幕| 国产成人鲁鲁免费视频a| 亚洲欧美在线x视频| 日韩中文字幕第一页| 午夜精品久久久久久久久久久久| 精品免费在线观看| 海角国产乱辈乱精品视频| 亚洲精品久久久久中文字幕欢迎你| 亚洲精品永久免费| 91chinesevideo永久地址| 欧美午夜精品久久久久久久| 色综合视频网站| 日韩成人在线视频观看| 精品无码久久久久久国产| 亚洲va久久久噜噜噜| 欧美主播福利视频| 亚洲精品免费在线视频| 亚洲欧洲激情在线| 亚洲精品乱码久久久久久金桔影视| 久久久久久久久国产| 国产精品美女免费| 亚洲成人激情图| 亚洲人精品午夜在线观看| 91中文在线视频| 91国在线精品国内播放| xxxxx91麻豆| 亚洲第一中文字幕在线观看| 正在播放亚洲1区| 久久久亚洲网站| 国产精品久久久久久久久久久新郎| 欧美大片在线免费观看| 国产亚洲美女精品久久久| 孩xxxx性bbbb欧美| 精品夜色国产国偷在线| 国外日韩电影在线观看| 欧美精品电影免费在线观看| 蜜臀久久99精品久久久无需会员| 亚洲一区亚洲二区亚洲三区| 日韩精品中文字幕在线播放| 亚洲图片欧美日产| 亚洲国产成人爱av在线播放| www.欧美精品| 亚洲午夜av久久乱码| 国产成人激情视频| 美女精品视频一区| 亚洲国产精品va在线看黑人| 一区二区中文字幕| 国产精品欧美一区二区三区奶水| 国产精品久久久久久久av电影| 欧美疯狂做受xxxx高潮| 91久久国产精品91久久性色| 久久久精品久久| 国产在线视频2019最新视频| 92看片淫黄大片欧美看国产片| 久国内精品在线| 日韩h在线观看| 在线观看国产精品91| 成人一区二区电影| 成人中文字幕在线观看| 在线观看欧美成人| 97精品免费视频| 91国语精品自产拍在线观看性色| 日韩hd视频在线观看| 久久亚洲电影天堂| 国产主播在线一区| 国产一区二区欧美日韩| 国产亚洲美女精品久久久| 国产免费一区二区三区在线能观看| 国产欧美精品一区二区三区介绍| 久久久久久久av| 欧美另类老女人| 久青草国产97香蕉在线视频| 国产精品海角社区在线观看| 久久精品色欧美aⅴ一区二区| 97精品国产97久久久久久| 欧美黄色免费网站| 久久成人精品一区二区三区| 久久精品男人天堂| 亚洲第一免费网站| 国产精品美女999| 亚洲一区二区久久久久久| 国产精品都在这里| 欧美日韩成人免费| 国产亚洲成av人片在线观看桃| 亚洲欧美日韩国产精品| 亚洲韩国日本中文字幕| 亚洲一区二区三区视频| 亚洲91精品在线观看| 久久久久久久一区二区| 亚洲黄色在线观看| 国产亚洲视频在线观看| 欧美黄色片视频| 91久久久久久久久| 中文字幕亚洲在线| 成人天堂噜噜噜| 精品国产一区二区三区久久久狼| 国产精品久久久久7777婷婷| 中文字幕亚洲精品| 国内精品模特av私拍在线观看| 久久精品欧美视频| 日韩美女在线观看一区| 久久成人亚洲精品| 日韩中文字幕在线视频播放| 日韩欧美精品网站| 亚洲无限乱码一二三四麻| 亚洲男人天堂网| 91麻豆桃色免费看| 精品国产自在精品国产浪潮| 91欧美日韩一区| 欧美电影在线观看| 成人av在线天堂| 另类色图亚洲色图| 亚洲精品久久久久| 国产玖玖精品视频| 欧美一区二区三区四区在线| 国产精品偷伦一区二区| 亚洲色图50p| 国产精品视频一| 国产一区二区三区在线| 尤物yw午夜国产精品视频| 97欧美精品一区二区三区| 亚洲综合中文字幕在线观看| 欧美久久精品午夜青青大伊人| 亚洲国产欧美自拍| 国产日韩在线视频| 北条麻妃一区二区三区中文字幕| 亚洲欧美日韩中文在线| 日韩av在线免播放器| 欧美激情亚洲激情| 亚洲美女精品久久| 国产一区二区美女视频| 欧美性猛交丰臀xxxxx网站| 91禁国产网站| 欧美黑人视频一区| 国产精品亚洲第一区| 欧美成年人视频网站欧美| 亚洲一区二区三区777| 亚洲欧美中文字幕| 国产亚洲成精品久久| 亚洲天堂网站在线观看视频| 亚洲尤物视频网| 欧美激情视频网站| 亚洲欧美视频在线| 日本久久久久久久久久久| 欧美成人免费播放| 久久久久女教师免费一区| 亚洲人线精品午夜| 欧美在线视频观看| 97激碰免费视频| 亚洲在线免费视频|