Vue

by ababinili

HTML

<div id="app">
  <div class="container-fluid color-choice">
    <div class="row color-choice_row">
      <div class="col ">
        <img class="color-choice-frame" src="../../../static/img/frame.png" alt="рама"/>
        <img class="color-choice-handle" src="../../../static/img/handle.png" alt="ручка"/>
        <div class="color-choice-handle_brush d-flex justify-content-center align-items-center">
          <div class="color-choice-wrapper d-flex justify-content-center align-items-center">
            <img :src="'../../static/svg/'+[openChoiceHandle ? 'ok.svg' : 'brush.svg']" alt=""/>
          </div>
          <transition name="zoom">
          <svg v-show="openChoiceHandle" style="position: absolute; z-index: 10" version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               width="254.891px" height="254.891px" viewBox="0 0 254.891 254.891"
               enable-background="new 0 0 254.891 254.891"
               xml:space="preserve">

            <g>
	<defs>
		<path id="SVGID_1_" d="M127.446,0.451L127.446,0.451c46.978,0,88.013,25.421,110.113,63.255L127.446,127.28V0.451z"/>
	</defs>
              <clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_" overflow="visible"/>
	</clipPath>
              <g clip-path="url(#SVGID_2_)">

			<image overflow="visible" width="172" height="183" id="_x37_Vucec_1_"
             xlink:href="./../../../static/svg/circle-frame/AB46926B89A8C5FC.jpg"
             transform="matrix(1 0 0 1 93.5 -23.22)">
		</image>
	</g>
</g>
            <g>
	<defs>
		<path id="SVGID_3_" d="M237.541,190.341L237.541,190.341c23.489-40.684,21.991-88.932,0.276-126.988l-110.113,63.574
			L237.541,190.341z"/>
	</defs>
              <clipPath id="SVGID_4_">
		<use xlink:href="#SVGID_3_" overflow="visible"/>
	</clipPath>
              <g clip-path="url(#SVGID_4_)">

			<image overflow="visible" width="182" height="178" id="RadzWd_1_"
            ...

SASS

%brush-form
  width: 63px
  height: 63px
  position: absolute

%brash-view
  border-radius: 120px
  background-color: #feec34
  position: absolute
  z-index: 11


%brush-shadow
  -webkit-box-shadow: -2px 0px 0px 20px rgba(254, 236, 52, 0.29)
  -moz-box-shadow: -2px 0px 0px 20px rgba(254, 236, 52, 0.29)
  box-shadow: -2px 0px 0px 20px rgba(254, 236, 52, 0.29)

.color-choice
  height: 700px
  background: url("../../../static/img/backColorChoice.png") no-repeat
  background-size: cover

  &-frame
    position: absolute
    top: 1px
    right: 138px

    &_brush
      @extend %brush-form
      top: 500px
      right: 343px

  &-wrapper
    @extend %brush-form
    @extend %brush-shadow
    @extend %brash-view


  &-handle
    position: absolute
    top: 107px
    right: 60px

    &_brush
      @extend %brush-form
      top: 148px
      right: 50px

  &-wrapper
    @extend %brush-form
    @extend %brush-shadow
    @extend %brash-view

  &_row
    height: 100%

  &_title
    color: #000000
    font-family: "Gotham Pro", sans-serif
    font-size: 60px
    font-weight: 700
    line-height: 72px
    text-transform: uppercase
    display: block
    margin-bottom: 30px

  &_desc
    color: #000000
    font-family: "DIN Pro", sans-serif
    font-size: 24px
    font-weight: 400
    line-height: 34px
    display: block
    margin-bottom: 40px

Vue

new Vue({
  el: "#app",
  data: {
    openChoiceFrame: true,
        openChoiceHandle: false,
        buttonSrc: {
          message: '../../static/svg/round-message.svg',
          calc: '../../static/svg/calc.svg'
        },
        /**
         * @var color
         * @property цвета указаны с папкой в которой они лежат, относительно {static/svg}

        color1F: {id: '_x37_Vucec_1_',width: 172, height: 183, transform:'matrix(1 0 0 1 93.5 -23.22)', src:'circle-frame/AB46926B89A8C5FB.jpg'},
        color2F: {id: 'RadzWd_1_',width: 182, height: 178, transform:'matrix(1 0 0 1 108 30.28)', src: 'circle-frame/AB46926B89A8C5FC.jpg'},
        color3F: {id: 'WwgmSQ_1_',width: 186, height: 205, transform:'matrix(1 0 0 1 -58.5543 24.3468)', src: 'circle-frame/AB46926B89A8C5FD.jpg'},
        color4F: {id: 'aPeaMC_1_',width: 160, height: 203, transform:'matrix(1 0 0 1 -5.242 88.8409)', src: 'circle-frame/AB46926B89A8C604.jpg'},
        color5F: {id: '_x32_k44bz_1_',width: 201, height: 196, transform:'matrix(1 0 0 1 85 100.78)', src: 'circle-frame/AB46926B89A8C605.jpg'},
        color6F: {id: '_x37_yIWP3_1_',width: 231, height: 208, transform:'matrix(1 0 0 1 -48.4979 -40.1343)', src: 'circle-frame/AB46926B89A8C607.jpg'},
        //
        color1H: {id: 'Wfj7Sz_1_', width: 328, height: 328, transform:'matrix(0.8 0 0 0.8 51.3077 -64.6087)', src: 'circle-handle/1B69BC0BAC9B385A.jpg'},
        color2H: {id: '_x31_gwnhf_1_', width: 240, height: 240, transform:'matrix(0.7583 0 0 0.7583 90 32.28)', src: 'circle-handle/1B69BC0BAC9B385B.jpg'},
        color3H: {id: '_x37_bMD1T', width: 1000, height: 1000, transform:'matrix(0.186 0 0 0.186 -0.055 28.14)', src: 'circle-handle/1B69BC0BAC9B385C.jpg'},
        color4H: {id: '_x32_pSghd_1_', width: 328, height: 328, transform:'matrix(0.5777 0 0 0.5777 4.258 85.5645)', src: 'circle-handle/1B69BC0BAC9B385D.jpg'},
        color5H: {id: '_x31_fYKDP_1_', width: 328, height: 328, transform:'matrix(0.6919 0 0 0.6919 50.5652 69.8452)', src:...