123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <template>
- <view style="width: 100%; height: 100%">
- <div class="checkwind-echarts-div" v-if="type == 'windrect_rect'">
- <div class="checkwind">
- <div
- class="sub_line"
- v-bind:class="
- state == '0'
- ? 'top_state'
- : state == '1'
- ? 'middle_state'
- : state == '2'
- ? 'bottom_state'
- : 'bottom_state'
- "
- id="subline"
- ></div>
- </div>
- <span>{{ title }}</span>
- </div>
- <div class="checkwind-echarts-div" v-if="type == 'windrect_ds'">
- <div class="checkwind_ds">
- <div
- class="sub_line"
- v-bind:class="
- state == '0'
- ? 'top_state'
- : state == '1'
- ? 'middle_state'
- : state == '2'
- ? 'bottom_state'
- : 'bottom_state'
- "
- id="subline"
- ></div>
- <div
- class="sub_line1"
- v-bind:class="
- state == '0'
- ? 'top_state1'
- : state == '1'
- ? 'middle_state1'
- : state == '2'
- ? 'bottom_state1'
- : 'bottom_state1'
- "
- id="subline1"
- ></div>
- <div
- class="sub_line2"
- v-bind:class="
- state == '0'
- ? 'top_state2'
- : state == '1'
- ? 'middle_state2'
- : state == '2'
- ? 'bottom_state2'
- : 'bottom_state2'
- "
- id="subline2"
- ></div>
- </div>
- <span>{{ title }}</span>
- </div>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- height: "200px",
- };
- },
- props: ["state", "title", "height", "type"],
- methods: {},
- onLoad(query) {},
- };
- </script>
- <style scoped>
- /*门里面*/
- div.checkwind {
- width: 160px;
- height: 160px;
- background-image: url(/static/wind.png);
- background-size: 100% 100%;
- perspective: 800px;
- }
- /*左门/右门*/
- div.checkwind .sub_line {
- margin-top: 10px;
- margin-left: 10px;
- width: 142px;
- height: 30px;
- box-sizing: border-box;
- float: left;
- z-index: 1;
- transition: all 2s ease;
- background-image: url(/static/line.png);
- background-size: 100% 100%;
- }
- div.checkwind .sub_line {
- transform-origin: left center;
- border-right: 1px solid rgb(8, 8, 8);
- }
- .checkwind .top_state {
- transform: translateY(5px);
- }
- .checkwind .middle_state {
- transform: translateY(45px);
- }
- .checkwind .bottom_state {
- transform: translateY(90px);
- }
- </style>
- <style scoped>
- /*门里面*/
- div.checkwind_ds {
- width: 160px;
- height: 160px;
- background-image: url(/static/wind.png);
- background-size: 100% 100%;
- perspective: 800px;
- }
- /*左门/右门*/
- div.checkwind_ds .sub_line {
- margin-top: 10px;
- margin-left: 8px;
- width: 180px;
- height: 25px;
- box-sizing: border-box;
- float: left;
- z-index: 1;
- transition: all 2s ease;
- background-image: url(/static/line_ds.png);
- background-size: 100% 100%;
- }
- div.checkwind_ds .sub_line1 {
- position: absolute;
- top: 20px;
- left: 12px;
- width: 30px;
- height: 35px;
- box-sizing: border-box;
- z-index: 4;
- transition: all 2s ease;
- background-image: url(/static/wind_ds1.png);
- background-size: 100% 100%;
- }
- div.checkwind_ds .sub_line2 {
- position: absolute;
- top: 12px;
- right: 12px;
- width: 33px;
- height: 38px;
- box-sizing: border-box;
- z-index: 4;
- transition: all 2s ease;
- background-image: url(/static/wind_ds2.png);
- background-size: 100% 100%;
- }
- div.checkwind_ds .sub_line {
- transform-origin: left center;
- border-right: 1px solid rgb(8, 8, 8);
- }
- .checkwind_ds .top_state {
- transform: translateY(15px) rotateY(-40deg);
- /* transform: rotateY(-20deg) */
- }
- .checkwind_ds .middle_state {
- transform: translateY(45px) rotateY(0deg) scaleX(0.83);
- }
- .checkwind_ds .bottom_state {
- transform: translateY(80px);
- }
- .checkwind_ds .top_state1 {
- transform: translateY(0px);
- /* transform: rotateY(-20deg) */
- }
- .checkwind_ds .middle_state1 {
- transform: translateY(30px);
- }
- .checkwind_ds .bottom_state1 {
- transform: translateY(65px);
- }
- .checkwind_ds .top_state2 {
- transform: translateY(0px);
- /* transform: rotateY(-20deg) */
- }
- .checkwind_ds .middle_state2 {
- transform: translateY(35px);
- }
- .checkwind_ds .bottom_state2 {
- transform: translateY(72px);
- }
- </style>
|