The kousensai-web's discuss from adelppi

Cardのチャイルド（pin-cotainer）にapplyRandomStylesの値をパスする方法

元々のapplyRandomStyles()はCardのチャイルドのstyleは変更できない。
この方法でいいか確認してほしいです。

変更項目：
・applyRandomStyles()

Kousensai-web/frontend/src/views/Introduction.vue

Lines 33 to 57 in ec9a956

  applyRandomStyles() { 

  this.cardStyles = this.projects.map( () => { 

  const rotate = Math.floor(Math.random() * 10) - 5; // -10度から10度までのランダムな傾き 

  const scale = Math.random() * 0.1 + 0.95; // 0.95から1.05までのランダムな大きさ 

  const x = Math.floor(Math.random() * 21) - 10; // -10pxから10pxまでのランダムな横位置 

  const y = Math.floor(Math.random() * 21) - 10; // -10pxから10pxまでのランダムな縦位置 

  const backgroundX = Math.floor(Math.random() * 100); 

  const backgroundY = Math.floor(Math.random() * 100); 

  const childX = ((Math.random() * 2) + 4) * 10; // 40%から60%までのランダムなマージン 

  const colorRotate = Math.floor(Math.random() * 360); 

  return { 

  'parentStyle': { 

  'transform': `rotate(${rotate}deg) scale(${scale})`, 

  'margin': `${y}px ${10 + x}px 0`, 

  'background-position': `${backgroundX}% ${backgroundY}%`, 

  // 'filter': `hue-rotate(${colorRotate}deg)` 

  }, 

  'childStyle': { 

  'margin': `1rem auto 1rem ${childX}%` 

  } 

  };

・Introduction.vueのHTML

Kousensai-web/frontend/src/views/Introduction.vue

Lines 73 to 75 in ec9a956

 <Card class="card" :style="cardStyles[index]['parentStyle']" :child_style="cardStyles[index]['childStyle']" v-for="(i, index) in projects" :key="index" :id="i.id" 

 :vote="i.vote" :team_name="i.team_name" :project_name="i.project_name" :project_space="i.project_space" 

 :project_description="i.project_description" :imagePath="'src/assets/nelnel.jpg'" />

・Card.vue：

Kousensai-web/frontend/src/components/Card.vue

Lines 69 to 71 in ec9a956

 <div class="pin-container" :style="child_style"> 

 <img src="" alt="pin"> 

 </div>

adelppi / kousensai-web Goto Github PK

kousensai-web's Issues

Cardのチャイルド（pin-cotainer）にapplyRandomStylesの値をパスする方法

LostFoundAdmin.vueでパスワードがあってなくても見れる

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	applyRandomStyles() {
	this.cardStyles = this.projects.map( () => {
	const rotate = Math.floor(Math.random() * 10) - 5; // -10度から10度までのランダムな傾き
	const scale = Math.random() * 0.1 + 0.95; // 0.95から1.05までのランダムな大きさ
	const x = Math.floor(Math.random() * 21) - 10; // -10pxから10pxまでのランダムな横位置
	const y = Math.floor(Math.random() * 21) - 10; // -10pxから10pxまでのランダムな縦位置

	const backgroundX = Math.floor(Math.random() * 100);
	const backgroundY = Math.floor(Math.random() * 100);

	const childX = ((Math.random() * 2) + 4) * 10; // 40%から60%までのランダムなマージン

	const colorRotate = Math.floor(Math.random() * 360);

	return {
	'parentStyle': {
	'transform': `rotate(${rotate}deg) scale(${scale})`,
	'margin': `${y}px ${10 + x}px 0`,
	'background-position': `${backgroundX}% ${backgroundY}%`,
	// 'filter': `hue-rotate(${colorRotate}deg)`
	},
	'childStyle': {
	'margin': `1rem auto 1rem ${childX}%`
	}
	};

	<Card class="card" :style="cardStyles[index]['parentStyle']" :child_style="cardStyles[index]['childStyle']" v-for="(i, index) in projects" :key="index" :id="i.id"
	:vote="i.vote" :team_name="i.team_name" :project_name="i.project_name" :project_space="i.project_space"
	:project_description="i.project_description" :imagePath="'src/assets/nelnel.jpg'" />

	<div class="pin-container" :style="child_style">
	<img src="" alt="pin">
	</div>